📌
동적 이벤트 바인딩이란, 동적으로 생성된 Element에 이벤트를 바인딩 한다.
이미 페이지가 로드되면서 개발자가 작성한 JS는 전부 이벤트가 바인딩 된 상태입니다. 동적으로 Element를 생성해서 추가(페이지 새로고침 없이 Element를 추가)했다면 이벤트 버블링을 이용하여 동적으로 생성된 객체에 이벤트를 바인딩 할 수 있습니다.
◼ 이벤트 버블링(Event Bubbling)
버블링은 이벤트가 발생한 요소부터 점점 부모 요소를 거슬러 올라가서 window까지 이벤트를 전파하는 것 입니다.
버블링을 강제로 중단시키는 방법도 존재합니다. 이벤트 객체의 메서드인
event.stopPropagation()를 사용하면 됩니다.
◼ 이벤트 캡처링(Event Capturing)
캡처링은 버블링과 반대입니다. window부터 이벤트가 발생한 요소까지 이벤트를 전파합니다. 캡처링 단계를 이용해야 하는 경우는 흔하지 않아서, 캡처링에 관한 코드를 발견하는 일은 거의 없습니다.
◼ 예제
<html>
<body>
<div class="root">
<!-- S: 동적 추가부분 -->
<h2 class="parent">
<button class="child">
<span class="target">Target</span>
</button>
</h2>
<!-- E: 동적 추가부분 -->
</div>
<button class="btn" name="btn">Element 추가</btton>
</body>
</html>동적으로 Element가 생성되었고, target 클래스(span)을 클릭 한 경우
1. target(span)에서 click 이벤트를 잡지 못하고 child(button)으로 이벤트가 버블링 됩니다.
2. child(button)에서 click 이벤트를 잡지 못하고 parent(h2)으로 이벤트가 버블링 됩니다.
3. parent(h2)에서 click 이벤트를 잡지 못하고 root(div)로 이벤트가 버블링 됩니다.
4. root(div)에서 click 이벤트를 잡아서 아래 소스코드를 실행합니다.(해당 click이벤트는 document까지 버블링 됩니다.)
document.querySelector('.root').addEventListener('click', function (e) {
alert("root");
alert(e.target);
});그럼 함수에 있는 alert("root")와 alert(e.target)가 실행됩니다.
이벤트는 .root Element에서 받았지만, e.target을 출력하면 사용자가 클릭한 위치의 Element를 알아낼 수 있습니다.
