addEventListener()의 세 번째 매개변수 useCapture(Boolean)에 대한 상세 분석

addEventListener()의 세 번째 매개변수 useCapture(Boolean)에 대한 상세 분석_기본 지식

WBOY

풀어 주다： 2016-05-16 17:17:07

원래의

2448명이 탐색했습니다.

예

d3에 마우스를 클릭하면 이벤트 흐름은 이렇습니다.

캡처 단계에서는 div1에 useCapture가 true인 이벤트 핸들러가 있는지 감지합니다. 있는 경우 프로그램을 실행한 후 div2도 유사하게 처리합니다.

대상 단계 div3에서는 마우스로 클릭한 노드가 div3임을 알 수 있으므로 이것이 대상 단계입니다. 이벤트 핸들러가 있으면 useCapture가 true인지 false인지에 관계없이 프로그램이 실행됩니다.

버블링 단계에서는 div2에 useCapture가 false로 설정된 이벤트 핸들러가 있는지 검색합니다. 있는 경우 프로그램을 실행한 후 div1을 유사하게 처리합니다.

addEventListener에는 세 가지 매개변수가 있습니다. 첫 번째 매개변수는 이벤트 이름("click" 제외)을 나타내고, 두 번째 매개변수는 이벤트 처리를 수신하는 함수를 나타내며, 세 번째 매개변수는 이 문서에서 설명합니다.

여기를 클릭하세요.

var outDiv = document.getElementById("outDiv");
var middleDiv = document.getElementById("middleDiv") ;
var inDiv = document.getElementById("inDiv");
var info = document.getElementById("info");

outDiv.addEventListener("click", function () { info.innerHTML = "outDiv" "
"; }, false);
middleDiv.addEventListener("click", function () { info .innerHTML = "middleDiv" "
"; }, false);
inDiv.addEventListener("click", function () { info.innerHTML = "inDiv" "
"; }, false );

위는 우리가 테스트한 코드입니다. addEventListener는 3개이며, useCapture의 선택적 값은 true와 false이므로 2*2*2입니다. , 우리는 8개의 다른 프로그램을 얻을 수 있습니다.

•모두 false인 경우 트리거 순서는 inDiv, middleDiv, outDiv입니다.

•모두 true인 경우 실행 순서는 outDiv, middleDiv, inDiv입니다.

•outDiv가 true이고 나머지는 false인 경우 트리거 순서는 outDiv, inDiv, middleDiv입니다.

•middleDiv가 true이고 나머지는 false인 경우 실행 순서는 middleDiv, inDiv, outDiv입니다.

•…

드디어 내린 결론:

•true의 트리거 순서는 항상 false보다 앞에 옵니다.

•여러 개가 true인 경우 외부 레이어가 내부 레이어보다 먼저 트리거됩니다. •여러 개가 거짓인 경우 내부 레이어가 외부 레이어보다 먼저 트리거됩니다.