자바스크립트 이벤트 여러개 등록 - 이벤트 버블링

자바스크립트 이벤트 여러개 등록 - 이벤트 버블링

반응형

자바스크립트 이벤트 여러개 등록 - 이벤트 버블링

자바스크립트 코드를 작성하다 보면 똑같은 이벤트 타입의 반복적인 코드임에도 해결 방법을 몰라 모든 이벤트 대상에 일일이 이벤트 리스너 또는 핸들러를 연결해주는 경우가 있다. 이렇게 작성된 코드가 작동에는 문제가 없을지 모르지만, 유지보수 측면에서 보면 결코 좋은 코드 작성 방법이라 할 수 없다. 그렇다면 어떻게 반복적인 코드를 줄일 수 있는지 예제를 통해 알아보자.

let imgs = document.querySelectorAll(".img"); imgs[0].onclick = function(e) { // 반복적인 코드라인 } imgs[1].onclick = function(e) { // 반복적인 코드라인 } imgs[2].onclick = function(e) { // 반복적인 코드라인 }

querySelectorAll 메서드를 이용하여 이미지 엘리먼트 리스트를 반환받고 그 객체 주소를 imgs라는 변수로 참조한다. 반환된 노드리스트는 일반적인 array처럼 인덱스 번호를 통하여 접근이 가능하다. 따라서 [0], [1], [2] 인덱스 번호로 각각의 이미지 엘리먼트에 접근한다. 각각의 이미지 엘리먼트에 독립된 이벤트 리스너를 바인딩해주었다.

위처럼 작성된 코드는 분명 정상적으로 작동한다. 하지만 코드 수정이 필요한 경우 각각의 이벤트 리스너 마다 코드 수정이 필요하여서 때문에 버그를 유발할 수 있는 여지가 분명히 있다. 유지보수에 좋지 않다. 이벤트 버블링을 이용하여 코드를 개선해보자.

let imgList = document.querySelector(".img-list"); imgList.onclick = function (e) { if(e.target.nodeName != "IMG") return; // 실행할 코드 작성 시작 }

querySelector 메서드를 이용하여 .img-list로 특정해준 셀렉터에 부합하는 첫 번째 요소를 리턴받는다. 우리 예제 코드의 경우 img의 컨테이너 역할을 하고 있는 div 엘리먼트를 리턴 받는다. 이미지 태그 각각에 이벤트 리스너를 등록하는 것이 아닌 그 컨테이너에 하나의 이벤트 리스너를 연결한다. 이벤트 타겟이 이미지 요소가 아닌 경우 코드 함수 실행을 중단하기 위하여 조건 비교 후 return 키워드를 넣는다.

반응형

from http://tamagotch.tistory.com/36 by ccl(A) rewrite - 2021-12-24 11:26:49