[JS] Event delegation(이벤트 위임)

Event delegation(이벤트 위임)

 

event bubbling을 이용해서 event 제어하는 방법이다.

부모 안에 있는 자식 요소들에게 공통적으로 무언가를 처리해야 할 때

모든 자식 요소에 하나하나에 event listener(이벤트 리스너)를 추가하지 않고,

자식 요소의 공통된 부모 요소에 event Listener를 등록하여 자식 요소의 event를 제어한다.

부모 요소에 등록된 event Listener 에서 event.currentTarget과 event.target을 이용하여

event가 어디에서 발생했는지를 알 수 있고, 

원하는 요소에서 event가 발생되면 그 때 event listener를 처리한다.

 

 

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

 

// Bad
const lis = document.querySelectorAll('li');
lis.forEach(li => {
    li.addEventListener('click', () => {
        li.classList.add('selected');
    });
});

// Coooooooool 🙌
const ul = document.querySelector('ul');
ul.addEventListener('click', event => {
    if (event.target.tagName == 'LI') {
        event.target.classList.add('selected');
    };
});

 

 

자식 요소인 <li>에 event listener를 등록하지 않고, 부모요소인 <ul>에 event listener를 등록한다.

event.target으로 원하는 요소를 찾아서 원하는 조건을 만족하면 event listener를 처리한다.

 

 

See the Pen mdrvZvr by Eunji Jeon (@emcjrl) on CodePen.

 

이벤트 위임의 장점

• 부모 요소에만 event listener를 관리하기 때문에 자식 요소에서는 추가, 삭제가 자유롭다.
• event listener관리가 쉽다.
• 메모리 공간 사용량이 줄어든다.