Written by java-style
on 2021-12-10

Vanilla JS, jQuery 동적 이벤트 바인딩

첫 렌더링 때는 없다가, 특정 동작이후에 생기는 엘리먼트에 대한 이벤트를 추가해야 할 일이 있었다.

이렇게 동적으로 생기는 엘리먼트에 이벤트를 바인딩하는 방법에 대해 정리하고 넘어가려고 한다.

이벤트 버블링 특징을 활용하여, 상위 요소에 이벤트리스너를 추가해놓으면 된다.

상위 요소가 감싸고 있는 하위 엘리먼트에서 이벤트가 발생하면 이벤트가 버블링 되기 때문에 동적으로 추가된 돔에 대한 작업도 실행시킬 수 있는 것이다. 상위 엘리먼트는 처음부터 존재하는 상황이기 때문에 동적으로 생성된 엘리먼트에 이벤트를 바인딩할 수 있다.

바닐라 자바스크립트 예시

document.addEventListener('click', function (e) { if (e.target.classList.contains('active')) { console.log('yes'); } else { console.log('no'); } });

이벤트객체를 활용하였다.

제이쿼리

$(document).on('click', '.active', function() { // code... })

만약 어떤 DOM에 이벤트가 여러번 바인딩 될 수도 있다.

그러면 불필요하게 이벤트가 여러번 동작되므로

그럴 경우 e.stopImmediatePropagation();을 사용할 수 있다.

같은 이벤트에서 다른 리스너들이 불려지는 것을 막는다.