병호의 IT새싹키우기

# JS 이벤트 처리 - addEventListener 본문

JS

# JS 이벤트 처리 - addEventListener

병호네 2024. 7. 26. 12:10

💡학습 목표💡

  1. addEventListener() 메서드의 활용
  2. 이벤트 위임(Event Delegation)와 버블링(Bubbling)

 

addEventListener() 메서드의 활용 - 아이템 추가, 토글 기능 만들기

 

2. 이벤트 위임(Event Delegation)

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

원리

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

 

더보기

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

 

시나리오 코드 1 - 이벤트 버블링이란?

 

시나리오 코드 2 - 버블링 중단하기



 

시나리오 코드 3 - 이벤트 위임전에 개별적인 이벤트 리스너 할당.

 

 

시나리오 코드 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', (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>

'JS' 카테고리의 다른 글

JS 이벤트 처리 - 반복문과동적생성  (0) 2024.08.01
JS 이벤트 처리 - forms  (0) 2024.08.01
JS 이벤트 처리 - (기본)  (0) 2024.07.24
웹 페이지 렌더링 과정  (0) 2024.07.24
Browser Object Model  (2) 2024.07.24
'JS' Related Articles more