본문 바로가기
JS

JS 이벤트 처리 - 2 ( addEventListener )

형디 2024. 7. 26. 11:03
addEventListener() 메서드의 활용 - 아이템 추가, 토글 기능 만들기
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="reset.css" />
    <style>
      body {
        margin: 16px;
        display: flex;
        justify-content: center;
      }

      ul {
        list-style-type: none;
        padding: 0;
      }
      li {
        background-color: #f9f9f9;
        margin: 8px 0;
        padding: 10px;
        border: 1px solid #ccc;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <div>
      <h2>EventListener를 사용한 요소 추가, 삭제 수정, 토글 만들기</h2>
      <br /><br />
      <button id="addBtn">아이템 추가</button>
      <button id="toggleBtn">리스트 토글</button>
      <br /><br />
      <ul id="myList">
        <li>
          아이템 1
          <button class="editBtn">수정하기</button>
          <button class="deleteBtn">삭제하기</button>
        </li>
      </ul>
    </div>
    <script>
        let count = 1; 
        // * 아이템 추가 기능 
        // 1. 아이템 추가(addBtn) 이벤트 리스너를 등록 하자. 
        // 2. li 요소를 동적으로 생성 
        // 3. Ul 요소에 접근해서 자바스크립트 코드로 생성한 요소를 추가하자 
        document.getElementById("addBtn").addEventListener('click',  function() {
            count++; 
            let newItem =  document.createElement('li');
            newItem.innerHTML = ` 아이템 ${count} <button class="editBtn">수정하기</button>  <button class="deleteBtn">삭제하기</button> `;    
            document.getElementById('myList').append(newItem);
        });

        // * 아이템 토글 기능을 만들어 보자. 
        document.getElementById('toggleBtn').addEventListener('click', function() {
            let list  = document.getElementById('myList');
            list.style.display = list.style.display ==  'none' ?  '' : 'none';
        });

    </script>
  </body>
</html>

 

 

 

 

2. 이벤트 위임(Event Delegation)

이벤트 리스너를 하위 요소 개별적으로 달지 않고, 상위 요소에서 하나의 리스너로 모든 하위 요소의 이벤트를 관리하는 패턴이다. 이 패턴은 주로 동적으로 요소가 변경될 때 유용하다.

원리

브라우저에서 이벤트는 대상 요소에서 발생하며, 이후 상위 요소로 버블링(bubbling)된다. 이벤트 위임을 사용하면, 상위 요소에서 하위 요소에서 발생한 이벤트를 감지할 수 있다.

💡 버블링(Bubbling)은 이벤트가 발생한 요소에서 시작해 DOM 트리를 따라 위로 올라가며 전파되는 이벤트 전파 방식이다. 즉, 하위 요소에서 이벤트가 발생하면 그 이벤트는 상위 요소로 전파된다. 이를 통해 상위 요소에서 하위 요소의 이벤트를 감지할 수 있게 된다.

 

 

 

시나리오 코드 1 - 이벤트 버블링이란?
<!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>
    <!-- 이벤트 전파 속성 - 버블링에대한 개념  -->
    <div id="parent">
        <button id="child">Click me!</button>   
    </div>
    
    <script>
        document.getElementById('parent').addEventListener('click', () => {
            alert('Parent Div Clicked! ');
        } )

        document.getElementById('child').addEventListener('click', () => {
            alert('Button Clicked!');     
        });


    </script>
</body>
</html>

 

 

 

 

시나리오 코드 2 - 버블링 중단하기 
<!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>
    <!-- 이벤트 전파 중단하기  -->
    <div id="parent">
        <button id="child">Click me!</button>   
    </div>
    
    <script>
        document.getElementById('parent').addEventListener('click', () => {
             alert('Parent Div Clicked! ');
        } )

        // 버블링 중단하기 - 인수로 event 객체를 전달 받을 수 있다. 
        document.getElementById('child').addEventListener('click', (event) => {
            console.log('event', event);
            alert('Button Clicked!');   
            event.stopPropagation(); // 버블링 중단.   
        });
    </script>
</body>
</html>

 

 

 

시나리오 코드 3 - 이벤트 위임전에 개별적인 이벤트 리스너 할당. 
<!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>버튼 1</button></li>
        <li><button>버튼 2</button></li>
        <li><button>버튼 3</button></li>
    </ul>

    <script>
        // 각 버튼에 개별적으로 이벤트 리스너를 추가해보자. 단 반복문 활요 
        let btns = document.querySelectorAll("#myList button");
        console.log('btns', btns);
        // btns.forEach(function(b) {
        //     //alert('1');
        //     console.log('b', b);
        // }); 
        btns.forEach((button) => {
            //alert('1');
            // console.log('button', button);
            button.addEventListener('click', function() {
                alert("버튼 클릭 확인");
            })
        }); 
    </script>
</body>
</html>

 

 

 

시나리오 코드 4 - 이벤트 위임에 활용
이벤트 위임을 사용하면, ul 요소에 하나의 이벤트 리스너만 추가하여 모든 버튼의 클릭 이벤트를 처리할 수 있다.
<!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>버튼 1</button></li>
        <li><button>버튼 2</button></li>
        <li><button>버튼 3</button></li>
    </ul>

    <script>
        // button 에 가각 이벤트 리스너를 등록하자. !! 
        document.getElementById("myList").addEventListener('click', function(event) {
            console.log(event.target); 
            // 해당하는 target에 textContent 가지고 오고 싶다면 
            console.log(event.target.textContent);

            // 연습문제  1
            // 어떤 버튼이 눌러 졌는지 alert() 을 띄워 주세요. 
            // alert(event.target.textContent);

            // 연습문제  2
            // 해당하는 버튼에 컨텐츠를 영어로 수정하시오 
            // event.target.textContent = "button"; 

            // 연습문제 3
            // 버튼 2 라는 글자를 가진 버튼만 글자를 수정하시오. 
            

         } );

    </script>
</body>
</html>

 

 

 

 

풀이
<!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>버튼 1</button></li>
      <li><button>버튼 2</button></li>
      <li><button>버튼 3</button></li>
    </ul>
    <script>
      // button에 각각 이벤트 리스너를 등록하자. !!
      document.getElementById('myList').addEventListener('click', (event) => {
        console.log(event.target);
        // 해당하는 target에 textContent 가지고 오고 싶다면
        console.log(event.target.textContent);

        // 연습문제 1
        // 어떤 버튼이 눌러 졌는지 alert()을 띄워 주세요
        // alert(event.target.textContent);

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

        // 연습문제 3
        // 버튼 2라는 글자를 가진 버튼만 글자를 수정하시오.
        event.target.textContent = event.target.textContent == '버튼 2' ? '수정됨' : event.target.textContent;
      });
    </script>
  </body>
</html>
728x90

'JS' 카테고리의 다른 글

JS 이벤트 처리 - 4 ( 반복문과 동적 생성 )  (0) 2024.08.01
JS 이벤트 처리 - 3 ( forms )  (0) 2024.07.30
JS 이벤트 처리 - 1 ( 기본 )  (0) 2024.07.26
JS - 점검 6 ( 웹 페이지 렌더링 과정 )  (0) 2024.07.26
JS - 점검 5 ( Browser Object Model )  (0) 2024.07.26

'JS' Related Articles

티스토리툴바