[JavaScript] 13. 이벤트 위임 - 연습문제 풀이

2024년 07월 26일

Song hyun
작성자
2024.07.26.:49

728x90

[JavaScript] 13. 이벤트 위임 - 연습문제 풀이

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--이벤트 위임에 대한 개념을 배우기 전, 코드 활용-->
    <ul id="myList">
        <li><button id="btn1">버튼1</button></li>
        <li><button id="btn2">버튼2</button></li>
        <li><button id="btn3">버튼3</button></li>
    </ul>

    <script>
       // button에 각각 이벤트 리스너를 등록하자!
       document.getElementById("myList").addEventListener('click',function(event){
            console.log(event.target); 
            // 해당하는 타겟에 textContent를 가지고 오고 싶다면
            console.log(event.target.textContent);
            
            // *연습문제 1.
            // 어떤 버튼이 눌러졌는지 alert() 창을 띄워주세요.
            alert(event.target.textContent);

            // *연습문제 2.
            // 해당하는 버튼의 컨텐츠를 영어로 수정하시오
            event.target.textContent="button";
            // let n = 1;
           // for (let n = 1; n <= 3; n++) {
           //  if(event.target.textContent == `버튼 ${n}`){
           //  event.target.textContent = `button ${n}`;

            // *연습문제 3.
            // 버튼 2라는 글자를 가진 버튼만 글자를 수정하시오.
            let button2=document.getElementById("btn2");
            button2.textContent="button2";
            button2.style.color="blue";
            //event.target.textContent=event.target.textContent=="버튼2" ? '수정됨' : event.target.textContent;
       });
    </script>
</body>
</html>

*변수를 잘 활용하자!!

728x90

'HTML,CSS, JS > JavaScript' 카테고리의 다른 글

[JavaScript] 15. 쿼리 셀렉트문과 클래스 선택자 (0)	2024.08.01
[JavaScript] 14. 이벤트 처리 - 이미지 토글 (0)	2024.08.01
[JavaScript] 12. 이벤트 위임과 버블링 (0)	2024.07.26
[JavaScript] 11. EventListener (0)	2024.07.26
[JavaScript] 10. 자바스크립트의 이벤트 처리 (0)	2024.07.24

다음 글이 없습니다.

이전 글이 없습니다.

[JavaScript] 13. 이벤트 위임 - 연습문제 풀이

'HTML,CSS, JS > JavaScript' 카테고리의 다른 글

티스토리툴바