addEventListener의 세 가지 매개변수에 대한 useCapture_javascript 기술에 대한 자세한 설명

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인 경우 외부 레이어가 내부 레이어보다 먼저 트리거됩니다.
• 여러 개가 거짓인 경우 내부 레이어가 외부 레이어보다 먼저 트리거됩니다.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.