이 기사에서는 주로 js의 이벤트 위임 예제에 대한 자세한 설명을 공유합니다. 주로 두 가지 내용을 공유합니다. 1. 이벤트 위임의 원리와 장점 및 단점 2. 손으로 작성한 기본 js는 이벤트 프록시를 구현하며 브라우저 호환성이 필요합니다. .

Q: 이벤트 위임(Delegated Events)의 원칙과 장단점

A: 위임(프록시) 이벤트는 상위 요소에 바인딩된 이벤트이지만 특정 일치 조건이 충족되는 경우에만 해당됩니다. 움직이는. 이는 이벤트 버블링 메커니즘을 통해 달성됩니다.

(1) 많은 메모리 사용량을 절약하고 이벤트 등록을 줄일 수 있습니다. 예를 들어 테이블의 모든 TD 클릭 이벤트를 프록시하는 것이 좋습니다.

(2) 새로운 하위 개체가 추가되면 이벤트를 다시 바인딩할 필요가 없다는 것을 알 수 있습니다. 이는 특히 동적 콘텐츠 부분에 적합합니다.

단점은 다음과 같습니다.

이벤트 프록시의 일반적인 적용은 위의 요구 사항으로 제한되어야 합니다. 모든 이벤트가 프록시로 사용되는 경우 이벤트 오판이 발생할 수 있습니다. 즉, 트리거되어서는 안되는 이벤트가 이벤트에 바인딩됩니다.

예:

var toolbar = document.querySelector(".toolbar");
toolbar.addEventListener("click", function(e) {
  var button = e.target;
  if(!button.classList.contains("active"))
    button.classList.add("active");
  else
    button.classList.remove("active");
});

로그인 후 복사

버튼 요소를 클릭하면 e.target을 사용하여 현재 클릭한 항목을 찾습니다. 버튼.

Q: 이벤트 프록시를 구현하기 위해 손으로 쓴 네이티브 js이며 브라우저와 호환되어야 합니다

A: 사실 IE에서 이벤트 객체 e와 해당 속성 이름에 대한 이해를 평가하기 위한 것입니다.

데모 보기

function delegateEvent(interfaceEle, selector, type, fn) {// ============ 简单的事件委托
    if(interfaceEle.addEventListener){
    interfaceEle.addEventListener(type, eventfn);
    }else{
    interfaceEle.attachEvent("on"+type, eventfn);
    }
    function eventfn(e){
    var e = e || window.event;    
    var target = e.target || e.srcElement;
 
  
 //如果目标元素与选择器匹配则执行函数
    if (matchSelector(target, selector)) {
            if(fn) {
 //将fn内部的this指向target（在此之前this都是指向的绑定事件的元素即interfaceEle）
                fn.call(target, e); 
            }
        }
    }
}
/**
 * only support #id, tagName, .className
 * and it&#39;s simple single, no combination
 */
//比较函数：判断事件的作用目标是否与选择器匹配；匹配则返回true
function matchSelector(ele, selector) {
    //
 如果选择器为ID
    if (selector.charAt(0) === "#") {
            
        return ele.id === selector.slice(1);
   
    }
 
     //charAt(0),返回索引为0的字符
 
   //slice(a，b),从已有的数组或字符串返回从索引从a处开始，截取到索引b之前的子数组或子字符串；
    //如果选择器为Class
    if (selector.charAt(0) === ".") {
        return (" " + ele.className + " ").indexOf(" " + selector.slice(1) + " ") != -1;
    }
    //
 如果选择器为tagName
    return ele.tagName.toLowerCase() === selector.toLowerCase();
}
//toLowerCase()将字符串转换成小写
//调用
var op = document.getElementById("op");
delegateEvent(op,"a","click",function(){
    alert("1");
})

로그인 후 복사