我是FE，也是Fe

jQuery中的delegate与live实现方式简析

delegate和live方法是jQuery在1.4版本中新增的方法。他的作用是事件监听，但是可以对jQuery对象中新增的DOM对象也作用：

上面的这个demo运行效果就是点击一个段落P标签将在p标签后面添加一个p标签，对于新增的p标签同样可以点击新增一个p标签，新增的标签不需要监听其click事件。live也同理：

这个是怎么实现的了？我自己尝试了一把：首先必须了解事件的冒泡机制。下面的例子将在按钮 和其容器上同时监听click事件，根据冒泡的做法，将先触发按钮的click事件，然后触发容器div的click事件。

问题在于处理容器c的click事件是由冒泡触发的。需要找到真正触发事件的事件源按钮btn。标准浏览器的event提供了currentTarget属性获取原始事件源。否标准浏览器IE6/7/8可以直接使用this访问。这样div的click事件中可以获取到真正触发事件的事件源。

//ps:上面的代码中有个发现：在调试的时候发现IE 9中的e 和全局变量window.event有区别，IE 9的e的设置完全是按照标准浏览器来的。所以e也提供了currentTarget属性。下面是我调试时候的发现:

其实只要能获取到冒泡的原始事件源，对于新增的元素，我们通过监听其父容器事件，然后根据原始事件是否是新增元素，就可以触发新增元素的事件。这就是所谓的“代理(delegate)”，就是通过容器(未必是父容器)的事件监听代理新元素的事件。下面用一个超链接新增一个按钮并且在不监听其事件情况下通过事件冒泡捕获其事件。

window.onload = function(){
            function handle(e){
                //获取event对象
                //标准DOM方法事件处理函数第一个参数是event对象
                //IE可以使用全局变量window.event
                var evt = window.event?window.event:e;

                //获取触发事件的原始事件源
                //标准DOM方法是用target获取当前事件源
                //IE使用evt.srcElement获取事件源
                var target = evt.target||evt.srcElement;

                //获取当前正在处理的事件源
                //标准DOM方法是用currentTarget获取当前事件源
                //IE中的this指向当前处理的事件源
                var currentTarget= e?e.currentTarget:this;

                //问题：在IE 9下  window.event 与 e 不同 evt没有currentTarget属性,e才有currentTarget属性(视为标准浏览器做法？？)
                alert("src id:"+target.id+"\ncurent target id :"+currentTarget.id);

                if(target.id=="newbutton"){
                    alert("触发新增元素的delegate方法");
                }
            }
            document.getElementById("btn").onclick=handle;
            document.getElementById("c").onclick= handle;


            document.getElementById("btnadd").onclick=function(){
                var btn = document.createElement("input");
                btn.setAttribute("value","点击我试试");
                btn.setAttribute("type","button");
                btn.setAttribute("id","newbutton");
                //没有监听新按钮的onclick事件
                document.getElementById("c").appendChild(btn);
            }
        }

新增的按钮同样能监听到其click方法,只是使用其父容器代理click事件在代理新按钮的click事件

上面的分析也能说明为什么delegate的性能会比live要好。因为live是通过document.body的事件代理了新元素的事件。delegate指定了事件代理的夫容器，这样事件冒泡的层次会少，性能表现会好。

posted on 2011-04-19 12:07 衡锋 阅读(4729) 评论(3)  编辑  收藏 所属分类: javascript 、Web开发