동적요소 이벤트
화면이 로딩되고 나면, 기존의 요소들에는 작성된 이벤트가 바인딩 된 상태이다. 그렇다면, 어떻게 동적으로 생성된 요소에 이벤트를 발생시킬까?
이 때, 이벤트 버블링이라는 개념이 필요하다.
버블링과 캡처링
- 어떤 요소에서 이벤트가 발생했을 때, 이벤트 전파가 일어나는데 전파 방향에 따라 버블링과 캡처링으로 구분된다.
아래 예시코드를 통해 버블링과 캡처링을 알아보자.
📝예시 코드
<body>
<div>
<button>Click Me!</button>
</div>
<script>
const div = document.querySelector('div');
const button = document.querySelector('button');
// 버블링
div.addEventListener('click', function () {
console.log('Handler for div.');
});
// 버블링
button.addEventListener('click', function () {
console.log('Handler for button.');
});
// 캡처링
div.addEventListener('click', function () {
console.log('Handler for div.');
},true);
// 캡처링
button.addEventListener('click', function () {
console.log('Handler for button.');
},true);
</script>
</body>1) 버블링(Bubbling)
자식 요소에서 발생한 이벤트가 부모 요소로 전파되는 것을 버블링이라 한다.
사용자가 버튼을 클릭하면, 다음과 같은 순서로 버블링이 발생한다.
<button>의 이벤트 핸들러가 동작한다.
- 바깥의
<div>의 이벤트 핸들러가 동작한다.
- 바깥의
- 4, 5.
Document에 도달할 때까지, 각 요소에 할당된 이벤트 핸들러가 동작한다.
- 4, 5.
2) 캡처링(capturing)
자식 요소에서 발생한 이벤트가 부모 요소부터 시작하여 이벤트를 발생시킨 자식 요소까지 도달하는 것을 캡처링이라 한다.
사용자가 버튼을 클릭하면, 다음과 같은 순서로 캡처링이 발생한다.
- 2, 3.
Document에서 body까지, 각 요소에 할당된 이벤트 핸들러가 동작한다.
- 2, 3.
- 바깥의
<div>의 이벤트 핸들러가 동작한다.
- 바깥의
<button>의 이벤트 핸들러가 동작한다.
❓ 참조
캡처링 단계에서 이벤트를 잡아내려면 위의 코드에서addEventListener의 capture 옵션을 true로 설정해야 한다.addEventListener('click', function () { ... }, true); /* false이면(default 값) 핸들러는 버블링 단계에서 동작 true이면 핸들러는 캡처링 단계에서 동작 */
❓ 참조
버블링과 캡처링은 둘 중에 하나만 발생하는 것이 아니라캡처링부터 시작하여 버블링으로 종료한다.
그렇다면 버블링이 어떻게 동적으로 생성된 요소에 이벤트를 발생시킬 수 있을까?
아래 예시코드를 통해 알아보자.
📝예시 코드
<body>
<div id="button-container">
</div>
<script>
const element = document.querySelector("#button-container");
// event is added for the parent of #submit-button
element.addEventListener('click', function(e) {
if(e.target.id === 'submit-button') {
alert('Hello');
}
});
// #submit-button is dynamically added with Javascript
element.innerHTML = '<button id="submit-button">Submit</button>';
</script>
</body>동적으로 생성된 상태에서 submit-button id를 가진 button을 클릭한 경우에 아래의 과정이 일어난다.
- button에서 click 이벤트를 잡지 못하고 div으로 이벤트가 버블링 된다.
- div에서 click 이벤트를 잡아서 아래 코드를 실행하며 Hello 대화상자를 띄운다.
element.addEventListener('click', function(e) { if(e.target.id === 'submit-button') { alert('Hello'); } });
이처럼 이벤트를 발생시킨 요소의 부모 요소에도 영향(버블링)을 미치기 때문에 동적으로 생성된 요소에도 이벤트 발생이 가능한 것이다.
