简单事件委托实现

Posted 2020-09-02 等风来

function _delegate(obj,className,fn){
    var dc = " "+className+ " ";

    function cb(e){
        var target = e.target,
            c = "";

        while(target != obj){
            c = " "+target.getAttribute("class")+" ";
            if(c.indexOf(dc) != -1){
                fn.call(target,e);
            }
            target = target.parentNode;
        }
    }
    obj.addEventListener("click",cb,false);
}

调用：_delegate(document.body,"item",fn);

事件委托缺点:

事件委托有对子元素dom查找的过程，在委托层级较深，可能会有性能问题。此外，对于频繁触发的事件，例如mouseover，使用事件委托时要注意，尽量不用。