JavaScript 이벤트 수신, 캡처 및 버블링

프런트엔드 개발에서는 특정 이벤트를 모니터링해야 하는 경우가 많습니다. 이런 방식으로 지정된 요소에서 이벤트가 트리거되는 한 콜백이 실행되어 관련 작업을 수행합니다.

js에는 다음과 같은 세 가지 이벤트 수신 방법이 있습니다.

element.addEventListener(type,listener[,useCapture]) //IE6~8은 지원하지 않습니다. >element.attachEvent('on' + type, Listener); // IE6~10, IE11은 지원하지 않습니다.

element['on' + type] = function(){} // 모든 브라우저

데모:

function cb() { console.log(1); }
element.addEventListener('click', cb, false);
element.attachEvent('onclick', cb);
element.onclick = cb;

매개변수 의미:

유형: 이벤트 유형

리스너: 이벤트가 트리거된 후 콜백 함수

useCapture: 캡처 사용 여부. 값이 true인 경우 useCapture는 사용자가 캡처를 시작하려고 함을 나타냅니다. 캡처가 시작된 후 이벤트 유형이 Dom 하위 트리에서 발생하는 한 먼저 이벤트 리스너에 의해 캡처된 다음 Dom 하위 트리의 이벤트 리스너로 전달됩니다. 그리고 위쪽으로 버블링되는 이벤트는 캡처를 시작하는 이벤트 리스너를 트리거하지 않습니다. 자세한 설명은 DOM 레벨 3 이벤트 문서에서 찾을 수 있습니다. useCapture의 기본값은 false입니다.

단, IE6~8 브라우저에서는 addEventListener 메소드를 지원하지 않습니다. . 그렇다면 낮은 버전의 IE에서 동일한 이벤트에 대해 여러 이벤트 리스너를 어떻게 등록합니까? IE는 IE5.0 시리즈부터 이 기능을 지원하기 위해 attachmentEvent() 메서드를 도입한 것으로 나타났습니다. 그러나 불행하게도 이 방법은 이벤트 캡처도 지원하지 않습니다. 그리고 IE 11부터 이 방법은 더 이상 사용되지 않습니다.

element.onclick = function(){ console.log(0); }
element.onclick = function(){ console.log(1); }

이벤트 캡처 및 버블링에 대해 이야기합니다. W3C 사양에서는 3가지 이벤트 단계를 캡처 단계 순으로 정의합니다. , 목표 단계, 버블링 단계. 이벤트 개체는 위 그림의 전파 경로에 따라 이러한 단계를 순차적으로 완료합니다. 스테이지가 지원되지 않거나 이벤트 객체의 전파가 종료되면 해당 스테이지를 건너뜁니다. 예를 들어 Event.bubbles 속성이 false로 설정된 경우 버블링 단계를 건너뜁니다. 이벤트가 전달되기 전에 Event.stopPropagation()이 호출되면 모든 단계를 건너뜁니다.

캡처 단계: 이벤트 객체가 이벤트 대상에 도달하기 전에 이벤트 객체는 대상의 조상 노드를 통해 창에서 이벤트 대상으로 전파되어야 합니다. 이 단계를 캡처 단계라고 합니다. 이 단계에서 등록된 이벤트 리스너는 이벤트가 대상에 도달하기 전에 이벤트를 처리해야 합니다.

목표 단계: 이벤트 개체가 이벤트 대상에 도달합니다. 이 단계를 목표 단계라고 합니다. 이벤트 객체가 이벤트 대상에 도달하면 이 단계의 이벤트 리스너가 이를 처리합니다. 이벤트 객체 유형이 버블링되지 않는 것으로 표시된 경우. 그런 다음 해당 이벤트 개체는 이 단계에 도달하면 전파를 종료합니다.

버블링 단계: 이벤트 개체는 이벤트 대상에서 상위 노드를 통해 캡처 단계와 반대 방향으로 창으로 전파됩니다. 이 단계를 버블링 단계라고 합니다. 이 단계에서 등록된 이벤트 리스너는 해당 버블링 이벤트를 처리합니다.

이벤트가 전파 경로의 모든 단계를 완료한 후 해당 Event.currentTarget은 null로 설정되고 Event.eventPhase는 0으로 설정됩니다. 이벤트의 다른 모든 속성은 변경되지 않습니다(이벤트 대상을 가리키는 Event.target 속성 포함)