Javascript의 이벤트에 대한 짧은 이야기

JavaScript에서 Event Flow 프로세스는 세 가지 개념으로 완료됩니다.

이벤트 캡처

이벤트 대상

이벤트 버블링

Events are actions or occurrences that happen in the system you are programming, which the system tells you about so you can respond to them in some way if desired.

이벤트 버블링

이벤트 버블링은 이벤트가 가장 깊은 요소 또는 대상 요소에서 시작하여 부모, 그 다음 아래에서 위로 가는 모든 조상으로 시작합니다. 현재 모든 최신 브라우저에는 이벤트 흐름의 기본 방식으로 이벤트 버블링이 있습니다.

예시

<div id="parent">
 <button id="child">Child</button>
</div>

var parent = document.querySelector('#parent');
    parent.addEventListener('click', function(){
    console.log("Parent clicked");
});

var child = document.querySelector('#child');
    child.addEventListener('click', function(){
    console.log("Child clicked");
});

실행은 다음과 같이 종료됩니다.
Child clicked
Parent clicked
버튼을 클릭하면 내부 이벤트 대상(ID가 자식인 버튼)에서 Document로 이벤트가 전달됩니다. 다음 순서로 클릭 이벤트 패스:



이벤트 버블링을 중지하려면 event.stopPropagation() 메서드를 사용할 수 있습니다.

이벤트 캡처

이벤트 캡처는 최상위 요소에서 대상 요소로 이벤트가 시작됩니다. 최신 브라우저는 기본적으로 이벤트 캡처를 지원하지 않지만 JavaScript의 코드로 이를 달성할 수 있습니다.

<div id="parent">
 <button id="child">Child</button>
</div>

var parent = document.querySelector('#parent');
var child = document.querySelector('#child');
parent.addEventListener('click', function(){
    console.log("Parent clicked");
},true);
child.addEventListener('click', function(){
    console.log("Child clicked");
});

실행은 다음과 같이 종료됩니다.
Parent clicked
Child clicked

결론

이벤트 흐름에서 이벤트 대상에는 이벤트 캡처가 끝나고 이벤트 버블링이 시작되는 두 단계가 있습니다.