Event Capturing 궁금한점.

지금 Event Delegation 패턴을 배우고 있습니다.

그래서 그 전에 이벤트 캡쳐링에 대해 배우고 있는데

잘 모르는 점이 있어서 올려봅니다.

코드팬에 모든 소스를

올려놨습니다.

문제가 되는 코드는 아래와 같습니다.

 document.getElementById('divCapturingMiddle')
    .addEventListener('click', function(){
        this.classList.toggle('highlight');
        document.getElementById('divCapturingInside')  //문제가 되는 코드. DOM을 수정한다.
        .removeChild(document.getElementById('divCapturingFloat')); //맨 마지막에 실행되어진다.
        alert('Middle Capturing, deleting divCapturingFloat');
        this.classList.toggle('highlight');
}, true);

배우고 있는 책에서 말하려는 점은 이벤트가 실행이 되는 도중에 DOM이 수정이 되더라도 상관없이

이벤트는 실행이 된다고 말하고 있습니다.

즉, Middle에서 DOM을 삭제 한 뒤에도 inside와 float에 이벤트가 실행이 된다는 얘기를 하고있습니다만,

코드를 작성해 보니 중간에 삭제가 되지 않고 맨 마지막까지 이벤트가 모두 실행 된 뒤에야

DOM이 삭제가 되는 것을 볼 수 있습니다.

궁금한 점은 분명 이벤트 콜백자체는 큐로 넘어갔다가 스택에서 실행이 되는 것으로 알고 있는데

왜 콜백 함수의 중간에 있는 DOM삭제 코드가 맨 마지막에 실행이 되는지 입니다.

혹시 돔의 수정은 원래 큐로 넘어가나요?

1개의 좋아요

브라우저의 DOM 트리에서는 삭제가 되었지만, 브라우저가 화면에 리페인팅하는 것은 비동기라 그래요.
실제 DOM 조작이 리페인팅 되는데는 성능을 위해서 브라우저에서 많은 최적화 절차를 거칩니다.
DOM 조작은 동기 동작이긴 하지만, 리페인팅이 되는걸 기다린 뒤에 진행된다면 느려서 못쓸거에요.

참고 : How Browsers Work: Behind the scenes of modern web browsers
https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

2개의 좋아요

그렇군요. 알겠습니다. 렌더링 엔진에서는 이미 dom 자체는 수정이 되었지만, 페인팅은

렌더링 이후에 발생하는 작업이라서 그렇군요!

중요한 것을 얻어갑니다.