JS NORMAL | 이벤트 전파, 버블링, 캡처링, 이벤트 제어

chaen·2024년 1월 29일

JS Grammar

목록 보기

23/28

💻 이벤트 전파

HTML 문서는 태그 안에 태그가 위치하는 계층적 구조를 이루고 있다. 이런 구조 때문에 HTML 요소에 이벤트가 발생하게 되면 연쇄적 이벤트가 흐름이 발생하여 다른 곳으로 전파 시키는 현상이 일어나게 된다.

<form><div><p</p></div></form>

위와 같은 상황에서, p를 선택하면 p뿐만 아니라 상위 요소인 div와 form에도 이벤트가 전파되게 된다.

이러한 현상을 이벤트 전파(Event Propagation)라 부른다.

이벤트 전파 덕분에, 이벤트 등록 코드가 줄어드는 장점이 있다. ul 안에 여러 개의 li가 존재한다고 각각에 이벤트를 등록하고자 할때, 요소마다 이벤트를 일일이 등록하는 게 아닌 부모 요소 ul에만 등록하면 어떤 li를 선택하던간에 원하는 구현이 쉽게 가능하다. 이 기법은 이벤트 위임이라고 한다.

이벤트 전파는 전파 방향에 따라 버블링과 캡처링으로 구분한다.

💻 버블링(Bubbling)

자식 요소에서 발생한 이벤트가 바깥 부모 요소로 전파되는 것을 뜻하며, 브라우저의 이벤트는 기본적으로 버블링 방식으로 전파된다.

element.addEventListener('event', function { ... }, false);

false Bubbing을 말하며, 생략 가능하다.
true Capturing

💻 캡쳐링(Capturing)

자식 요소에서 발생한 이벤트가 부모 요소부터 시작하여 안쪽 자식 요소까지 도달하는 것을 의미한다. addEventListener의 세 번째 매개변수로 true를 주어야 한다.

🚫 이벤트 전파 제어

자기 자신만 이벤트를 발생하고 부모 요소는 이벤트를 발생시키지 않고 싶은 상황에서 제어를 해야 한다.

e.stopPropagation()

크롬, 사파리, 파이어폭스에서 지원

btn.addEventListener("click", (e) => {
  e.stopPropagation() // 이벤트 전파 방지
})

e.stopImmediatePropagation()

동일한 요소, 특정한 이벤트를 처리하는 핸들러가 중복될 경우, e.stopPropagation는 버블링은 제어 가능하지만 다른 형제 핸들러까지 막지 못한다.
stopImmediatePropagation() 메소드를 호출하면, 이벤트 전파와 형제 이벤트 실행을 모두 중지한다.

btn.addEventListener("click", (e) => {
    if(){ e.stopImmediatePropagation() }
})

btn.addEventListener("click", (e) => { })

cancelBubble

현재 이벤트가 이벤트 개층 구조에 따라 상위 개체로 흐르게 될 지를 지정하거나 알아내는 속성이다.
IE8 속성에서만 사용 가능

element.event.cancelBubble = false // 이벤트 버블링 허용(default)
element.event.cancelBubble = true // 이벤트 버블링 제어

e.target

콜백 함수의 매개변수를 이용하여 현재 호줄된 타켓의 정보를 가져와 직접 조건을 거는 방식으로 해당 요소에만 이벤트를 지정해주는 방법이다.

document.body.addEventListener('click', (e) => {

    if (e.target.id === "ancestor") {
        console.log('ancestor');
    }

    if (e.target.id === "parent") {
        console.log('parent');
    }

    if (e.target.id === "child") {
        console.log('child');
    }
    
});