att 다른 표준 브라우저에서는 addeventListener 및 RemoveEventListener가 사용됩니다. 다음은 이벤트의 추가 및 제거를 캡슐화합니다. 코드를보세요!
/*** @description 이벤트 바인딩, 브라우저* @param target* @param target* 이벤트 트리거 객체* @param type* @param func* event handler function*/function bind (target, type, func) {if (target.addeventListener) {// noneie and ie9target.addeventListener (tarting, func, func, func, func, func, funcivent); ie6 ~ ie8target.attachevent ( "on" + type, func);} else {target [on " + type] = func; // IE5}}/*** @description 이벤트 제거, 각 브라우저* @param target* 이벤트 트리거 객체* @param type* @param 유형* @Param 유형* @param func* 이벤트 핸들러 함수*/function undind (target, type, func) {if (target.removeeventListener) {target.removeeventListener (tarting, func, fund, func, retonc); {target.detachevent ( "on" + type, func);} else {target [ " + type] = null;}}addeventListener의 세 번째 매개 변수의 의미에 대한 다른 보충제
addeventListener의 세 번째 매개 변수
W3C DOM에서 트리거 이벤트를 추가하는 데 사용되는 기능을 addeventListener라고합니다. 그러나이 기능의 세 번째 매개 변수가 무엇을 사용 해야하는지 알지 못했습니다. 나는 항상 그것을 우연히 설정했고 어떤 차이도 찾지 못했습니다. 이틀 전에 JavaScript에서 PPK를 읽을 때 마침내 설명을 보았습니다. 오래 전에 발견 된 표준 DOM 파일은 실제로이 매개 변수에 대한 정보를 찾지 못했습니다.
이 매개 변수를 usecapture라고하며, 이는 부울 값이며 true 또는 false입니다. True가 전송되면 브라우저는 캡처 메소드를 사용합니다. 거짓이라면, 그것은 버블 링이며, 이는 특정 상황에만 영향을 미칩니다. 일반적으로 거짓이라는 것이 좋습니다. 영향이있는 상황은 대상 요소에 조상 요소와 동일한 이벤트 서신 함수가 있다는 것입니다. 사진을 보는 것이 더 명확 할 것이라고 생각합니다.
이 예제에는 두 개의 div 블록 층이 있습니다
이 그림에서 볼 수 있듯이 내 예제에는 두 개의 div 요소가 있으며 둘 다 클릭 이벤트를 설정합니다. 일반적으로 내부 파란색 요소를 클릭하면 파란색 요소의 클릭 이벤트를 트리거 할뿐만 아니라 빨간색 요소의 클릭 이벤트를 동시에 트리거합니다. Usecapture 매개 변수는 현재 두 번의 클릭 이벤트의 순서를 제어하는 것입니다. 거짓이면 버블 링이 사용됩니다. 내부에서 프로세스이므로 파란색 요소의 클릭 이벤트가 먼저 실행 된 다음 빨간색 요소의 클릭 이벤트가 실행됩니다. 그것이 사실이라면, 그것은 캡처됩니다. 반대로, 버블 링은 외부에서 내부로있을 것입니다. 빨간색 요소의 클릭 이벤트는 파란색 요소의 클릭 이벤트가 실행되기 전에 먼저 실행됩니다. 첨부 된 것은 캡처와 Bubbleng의 두 가지 예입니다. 두 파일은이 매개 변수에서만 다르므로 일련의 이벤트가 다르다는 것을 알 수 있습니다.
다른 층의 요소에서 사용되는 usecapture가 다른 경우 어떻게해야합니까? 이는 가장 바깥 요소에서 먼저 대상 요소에 대한 캡처로 설정된 이벤트를 찾아 대상 요소에 도달 한 후 대상 요소의 이벤트를 실행 한 다음 버블로 설정된 이벤트를 찾습니다.