以前总是对JS和Jquery的事件代理(即事件委托)很模糊,有时候看过用过久了就又忘了,很是DanTen,今天好好整理一下。

JS事件代理及将具体元素的事件代理到父级或者更高级的Document上面,需要的时候才从document上面去寻找;
而不是固定的bind到具体元素,这样降低了灵活调度和效率性;而且不利于动态添加同胞元素及自动bind事件,以下参考了高手的整理信息。

一、JS事件代理

用事件委托就可以只用一次dom操作就能完成所有的效果,比上面的性能肯定是要好一些的

现在讲的都是document加载完成的现有dom节点下的操作,那么如果是新增的节点,新增的节点会有事件吗?也就是说,一个新员工来了,他能收到快递吗?

看一下正常的添加节点的方法:

<input type="button" name="" id="btn" value="添加" />
<ul id="ul1">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>

现在是移入li,li变红,移出li,li变白,这么一个效果,然后点击按钮,可以向ul中添加一个li子节点

window.onload = function(){
    var oBtn = document.getElementById("btn");
    var oUl = document.getElementById("ul1");
    var aLi = oUl.getElementsByTagName('li');
    var num = 4;
    
    //鼠标移入变红,移出变白
    for(var i=0; i<aLi.length;i++){
        aLi[i].onmouseover = function(){
            this.style.background = 'red';
        };
        aLi[i].onmouseout = function(){
            this.style.background = '#fff';
        }
    }
    //添加新节点
    oBtn.onclick = function(){
        num++;
        var oLi = document.createElement('li');
        oLi.innerHTML = 111*num;
        oUl.appendChild(oLi);
    };
}

这是一般的做法,但是你会发现,新增的li是没有事件的,说明添加子节点的时候,事件没有一起添加进去,这不是我们想要的结果,那怎么做呢?一般的解决方案会是这样,将for循环用一个函数包起来,命名为mHover,如下:

window.onload = function(){
    var oBtn = document.getElementById("btn");
    var oUl = document.getElementById("ul1");
    var aLi = oUl.getElementsByTagName('li');
    var num = 4;
    
    function mHover () {
        //鼠标移入变红,移出变白
        for(var i=0; i<aLi.length;i++){
            aLi[i].onmouseover = function(){
                this.style.background = 'red';
            };
            aLi[i].onmouseout = function(){
                this.style.background = '#fff';
            }
        }
    }
    mHover ();
    //添加新节点
    oBtn.onclick = function(){
        num++;
        var oLi = document.createElement('li');
        oLi.innerHTML = 111*num;
        oUl.appendChild(oLi);
        mHover ();
    };
}

虽然功能实现了,看着还挺好,但实际上无疑是又增加了一个dom操作,在优化性能方面是不可取的,那么有事件委托的方式,能做到优化吗?

window.onload = function(){
        var oBtn = document.getElementById("btn");
        var oUl = document.getElementById("ul1");
        var aLi = oUl.getElementsByTagName('li');
        var num = 4;

        //JS事件委托/代理,添加的子元素也有事件
        oUl.onmouseover = function(ev){
            var ev = ev || window.event;
            var target = ev.target || ev.srcElement;
            if(target.nodeName.toLowerCase() == 'li'){
                target.style.background = "red";
            }
        };
        //Jquery的事件代理方式
        //$('#ul1').delegate('li', 'mouseover', function() { $(this).css({'background':'red'}); });
    
        //JS事件委托/代理,添加的子元素也有事件
        oUl.onmouseout = function(ev){
            var ev = ev || window.event;
            var target = ev.target || ev.srcElement;
            if(target.nodeName.toLowerCase() == 'li'){
                target.style.background = "#fff";
            }
        };
        //Jquery的事件代理方式
        //$('#ul1').delegate('li', 'mouseout', function() { $(this).css({'background':'#fff'}); });

        //JS事件委托/代理,添加新节点
        oBtn.onclick = function(){
            num++;
            var oLi = document.createElement('li');
            oLi.innerHTML = 111*num;
            oUl.appendChild(oLi);
        };
        //Jquery的事件代理方式
        //$('body').delegate('btn', 'click', function() { 
        //    var oLi = document.createElement('li');
        //    oLi.innerHTML = 111*num;
        //    $('#ul1').append(oLi);
        //});
}

看,上面是用事件委托的方式,新添加的子元素是带有事件效果的,我们可以发现,当用事件委托的时候,根本就不需要去遍历元素的子节点,只需要给父级元素添加事件就好了,其他的都是在js里面的执行,这样可以大大的减少dom操作,这才是事件委托的精髓所在。

参考: http://www.cnblogs.com/liugang-vip/p/5616484.html

二、Jquery事件代理

delegate()

$('#container').delegate('a', 'click', function() { alert("That tickles!") });

JQuery扫描文档查找$(‘#container’),并使用click事件和’a’这一CSS选择器作为参数把alert函数绑定到$(‘#container’)上。任何时候只要有事件冒泡到$(‘#container’)上,它就查看该事件是否是click事件,以及该事件的目标元素是否与CCS选择器相匹配。如果两种检查的结果都为真的话,它就执行函数。
可以注意到,这一过程与.live()类似,但是其把处理程序绑定到具体的元素而非document这一根上。精明的JS’er们可能会做出这样的结论,即$(‘a’).live() == $(document).delegate(‘a’),是这样吗?嗯,不,不完全是。