지금 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삭제 코드가 맨 마지막에 실행이 되는지 입니다.
혹시 돔의 수정은 원래 큐로 넘어가나요?