화면이 로딩되고 나면, 기존의 요소들에는 작성된 이벤트가 바인딩 된 상태이다. 그렇다면, 어떻게 동적으로 생성된 요소에 이벤트를 발생시킬까?
이 때, 이벤트 버블링
이라는 개념이 필요하다.
아래 예시코드를 통해 버블링과 캡처링을 알아보자.
📝예시 코드
<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>
자식 요소에서 발생한 이벤트가 부모 요소로 전파되는 것
을 버블링
이라 한다.
사용자가 버튼을 클릭
하면, 다음과 같은 순서로 버블링이 발생한다.
<button>
의 이벤트 핸들러가 동작한다.<div>
의 이벤트 핸들러가 동작한다.Document에 도달할 때까지
, 각 요소에 할당된 이벤트 핸들러가 동작한다.자식 요소에서 발생한 이벤트가 부모 요소부터 시작하여 이벤트를 발생시킨 자식 요소까지 도달하는 것
을 캡처링
이라 한다.
사용자가 버튼을 클릭
하면, 다음과 같은 순서로 캡처링이 발생한다.
Document에서 body까지
, 각 요소에 할당된 이벤트 핸들러가 동작한다.<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을 클릭한 경우
에 아래의 과정이 일어난다.
element.addEventListener('click', function(e) {
if(e.target.id === 'submit-button') {
alert('Hello');
}
});
이처럼 이벤트를 발생시킨 요소의 부모 요소에도 영향(버블링)을 미치기 때문에 동적으로 생성된 요소에도 이벤트 발생이 가능한 것이다.