-
자바스크립트 - 버블링, 캡쳐링의 활용과 이벤트 위임프론트엔드/JavaScript 2020. 10. 20. 12:05
버블링과 캡쳐링에 대해서 이미 정리한 내용이 있다.
그런데 어째서 이 버블링과 캡쳐링을 써야 하는지 의문이 들때가 있다.
실제 예시가 없으면 왜 필요한지 알 수 없기 때문이다.
우선 가장 간단하게 알 수 있는 이벤트 위임(event delegation)을 통해 알아보자.
<body> <div id="div"> <button id = "1번"> 1번 버튼 </button><br><br> <button id = "2번"> 2번 버튼 </button><br><br> <button id = "3번"> 3번 버튼 </button><br><br> <button id = "4번"> 4번 버튼 </button><br><br> <button id = "5번"> 5번 버튼 </button><br><br> </div> <button> div 밖의 버튼 </button> </body> </html>위와 같은 코드가 있다고 생각해보자.
만약 5개의 버튼에 기능을 준다고 생각해보자. 기존 방법을 쓰면 다음과 같이 해야한다.
<body> <div id="div"> <button id = "1번"> 1번 버튼 </button><br><br> <button id = "2번"> 2번 버튼 </button><br><br> <button id = "3번"> 3번 버튼 </button><br><br> <button id = "4번"> 4번 버튼 </button><br><br> <button id = "5번"> 5번 버튼 </button><br><br> </div> <button> div 밖의 버튼 </button> </body> <script> let no1 = document.getElementById('1번').addEventListener('click', function(e){ console.log(e.target) }); let no2 = document.getElementById('2번').addEventListener('click', function(e){ console.log(e.target) }); let no3 = document.getElementById('3번').addEventListener('click', function(e){ console.log(e.target) }); let no4 = document.getElementById('4번').addEventListener('click', function(e){ console.log(e.target) }); let no5 = document.getElementById('5번').addEventListener('click', function(e){ console.log(e.target) }); </script>5개의 버튼을 이용하려면 5개의 객체를 만들고 일일이 이벤트 리스너 메서드를 지정해줘야 했다.
하지만 이벤트 캡쳐링을 이용하면 이를 쉽게 극복할 수 있다.
<body> <div id="div"> <button id = "1번"> 1번 버튼 </button><br><br> <button id = "2번"> 2번 버튼 </button><br><br> <button id = "3번"> 3번 버튼 </button><br><br> <button id = "4번"> 4번 버튼 </button><br><br> <button id = "5번"> 5번 버튼 </button><br><br> </div> <button> div 밖의 버튼 </button> </body> <script> let div = document.getElementById('div').addEventListener('click', function(e){ console.log(e.target) }); </script>버튼의 상위 노드인 <div>에 이벤트 핸들러 메서드를 부여하면 캡쳐링에 따라 그 아래도 영향을 받는다.
이렇게하면 위와 똑같이 기능을 하면서도 코드를 획기적으로 줄일 수 있다.
이는 캡쳐링에 따라 상위에서 하위 노드로 이벤트가 전파 된 것으로 볼 수 있다.
그리고 이러한 방식의 이벤트 실행을 이벤트 위임(evnet delegation)이라 한다.
'프론트엔드 > JavaScript' 카테고리의 다른 글
이벤트 객체 (0) 2020.10.28 자바스크립트 - 이벤트 버블링과 캡쳐링 (0) 2020.10.20 자바스크립트 - 이벤트 핸들러 (0) 2020.10.19 자바스크립트 - 이벤트 (0) 2020.10.19 자바스크립트 고차함수 - find(), findindex() (0) 2020.10.06