기본 js events_javascript 기술 추가 및 삭제 캡슐화

IE 브라우저에서 이벤트를 추가하거나 삭제하려면 attachmentEvent 및 detachEvent를 사용하세요. 다른 표준 브라우저에서는 addEventListener 및 RemoveEventListener가 사용됩니다. 다음은 이벤트 추가 및 삭제를 요약합니다. 코드를 살펴보겠습니다!

/**
* @description 事件绑定，兼容各浏览器
* @param target
* 事件触发对象
* @param type
* 事件
* @param func
* 事件处理函数
*/
function bind(target, type, func) {
if (target.addEventListener) {// 非ie 和ie9
target.addEventListener(type, func, false);
} else if (target.attachEvent) { // ie6到ie8
target.attachEvent("on" + type, func);
} else {
target["on" + type] = func; // ie5
}
}
/**
* @description 事件移除，兼容各浏览器
* @param target
* 事件触发对象
* @param type
* 事件
* @param func
* 事件处理函数
*/
function unbind(target, type, func) {
if (target.removeEventListener) {
target.removeEventListener(type, func, false);
} else if (target.detachEvent) {
target.detachEvent("on" + type, func);
} else {
target["on" + type] = null;
}
}

addEventListener의 세 번째 매개변수 의미에 대한 기타 추가사항

addEventListener의 세 번째 매개변수

W3C DOM에 트리거 이벤트를 추가하는 데 사용되는 함수를 AddEventListener라고 하는데, 이 함수의 세 번째 매개변수가 어떤 용도로 사용되는지는 전혀 알 수 없으며 항상 아무렇게나 설정해 놓고도 찾지 못했습니다. 차이점이 얼마나 다른지, 이틀 전 ppk on javascript를 읽었을 때 비로소 설명을 보았습니다. 오래 전에 존재했던 DOM 표준 문서의 경우 실제로 이 매개 변수에 대한 정보를 찾아본 적이 없습니다. 모두.

이 매개변수는 true 또는 false인 부울 값인 useCapture입니다. true가 전송되면 브라우저는 false인 경우 버블링됩니다. 일반적으로 false를 사용하는 것이 좋습니다. 영향을 미칠 상황은 대상 요소(대상 요소)가 동일한 이벤트 해당 기능을 가지고 있다는 것입니다. 사진을 보면 더 명확해집니다.

2레이어 div 블록의 예

이 그림에 표시된 것처럼 내 예제에는 두 개의 div 요소 레이어가 있으며 둘 다 클릭 이벤트로 설정되어 있습니다. 일반적으로 내부 파란색 요소를 클릭하면 파란색 요소만 실행되는 것이 아닙니다. 또한 동시에 빨간색 요소의 클릭 이벤트를 트리거하며, useCapture 매개변수는 이때 두 클릭 이벤트의 순서를 제어합니다. false인 경우 버블링이 사용됩니다. 이는 내부 처리이므로 파란색 요소의 클릭 이벤트가 먼저 실행되고, true인 경우에는 빨간색 요소의 클릭 이벤트가 캡처됩니다. 버블링과 달리 Outside-in에 의해 실행되며, 빨간색 요소의 클릭 이벤트가 먼저 실행되고 파란색 요소의 클릭 이벤트가 실행됩니다. 첨부된 두 가지 예는 캡처와 버블링입니다. 두 파일의 유일한 차이점은 이 매개변수에서 이벤트 순서가 다르다는 것을 알 수 있습니다.

서로 다른 레이어의 요소가 서로 다른 useCapture를 사용하면 어떻게 되나요? 즉, 가장 바깥쪽 요소부터 대상 요소까지 캡처할 이벤트 세트를 먼저 검색한 후 대상 요소의 이벤트를 실행한 후 원본을 따라 바깥쪽으로 버블링할 이벤트 세트를 찾습니다. 길.