&&&&$("body").delegate("p",&"click",&function(){
&&&&&&$(this).after("&p&Another&paragraph!&/p&");
上面的这个demo运行效果就是点击一个段落P标签将在p标签后面添加一个p标签，对于新增的p标签同样可以点击新增一个p标签，新增的标签不需要监听其click事件。live也同理：
&&&&$("p").live("click",&function(){
&&&&&&$(this).after("&p&Another&paragraph!&/p&");
这个是怎么实现的了？我自己尝试了一把：首先必须了解事件的冒泡机制。下面的例子将在按钮 和其容器上同时监听click事件，根据冒泡的做法，将先触发按钮的click事件，然后触发容器div的click事件。
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.srcE
&&&&&&&&&&&&&&&&//获取当前正在处理的事件源
&&&&&&&&&&&&&&&&//标准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);
&&&&&&&&&&&&&&&&
&&&&&&&&&&&&}
&&&&&&&&&&&&document.getElementById("btn").onclick=
&&&&&&&&&&&&document.getElementById("c").onclick=&
&&&&&&&&&&&&
&div&id="c"&class=""&
&&&&&input&type="button"&id="btn"&name=""&value="button"&&/&
问题在于处理容器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.srcE
&&&&&&&&&&&&&&&&//获取当前正在处理的事件源
&&&&&&&&&&&&&&&&//标准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=
&&&&&&&&&&&&document.getElementById("c").onclick=&
&&&&&&&&&&&&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);
&&&&&&&&&&&&}
&div&id="c"&class=""&
&&&&&input&type="button"&id="btn"&name=""&value="button"&&/&
&a&href="###"&id="btnadd"&添加一个按钮&/a&
新增的按钮同样能监听到其click方法,只是使用其父容器代理click事件在代理新按钮的click事件
上面的分析也能说明为什么delegate的性能会比live要好。因为live是通过document.body的事件代理了新元素的事件。delegate指定了事件代理的夫容器，这样事件冒泡的层次会少，性能表现会好。JS和JQ的event对象区别分析
投稿：hebedich
字体：[ ] 类型：转载 时间：
js和jq的event对象大同小异，本文简单对比下它们的'click'事件下的不同和应用，给有需要的小伙伴参考下
代码测试：
&div id="test"&&p&test text&p&&/div&
&script src="vendor/jquery-2.1.1.js"&&/script&
test.addEventListener('click', function(e){console.log(e);}, false),
$('#test').on('click', function(e){console.log(e)});
结果分析：
js-jq-event-common:{
& altKey: false,
& bubbles: true,
& button: 0,
& cancelable: true,
& clientX: 58,
& clientY: 13,
& ctrlKey: false,
& offsetX: 50,
& offsetY: 5,
& pageX: 58,
& pageY: 13,
& screenX: 58,
& screenY: 122,
& view: Window,
& which: 1,
& type: 'click',
& timeStamp: 2,
& metaKey: false,
& relatedTarget: null,
& target: div#test /*jq-evt的target不一定是jQuery选择器匹配的元素，可能是第一个捕获事件的元素，然后向上冒泡时其中一个才是选择器匹配的元素*/
&js-jq-event-diff:{
& currentTarget: null/*貌似一般都为null*/
&&&&&&&&&&&&& || div#test/*jq选择器匹配的元素在[currentTarget]属性*/,
& eventPhase: 0 || 2,
& toElement: div#test
&js-event-solo:{
& cancelBubble: false,
& charCode: 0,
& clipboardData: undefined,
& dataTransfer: null,
& defaultPrevented: false,
& srcElement: div#test,
& fromElement: null,
& detail: 1,
& keyCode: 0,
& layerX: 58,
& layerY: 13,
& returnValue: true
&jq-event-solo: {
& buttons: undefined,
& data: undefined,
& delegateTarget: div#test/*谁在监听？就是这个元素啦。*/,
& isDefaultPrevented: function,
& handleObj: Object,
& jQuery: true,
& originalEvent: MouseEvent,
& shiftKey: false
&body-click-delegate-event: {
& currentTarget: HTMLBodyElement,
& delegateTarget: HTMLBodyElement,
& target: HTMLDivElement
js的event参数中，不管是target, toElement, srcElement都是指向第一个触发事件的元素（还没冒泡），而fromElement在click事件中为null，所以，你如果是设置包含很多元素的父容器parent事件，那么触发事件的很可能是这个parent的子元素。
因此，在实际应用中，如果要引用parent,那你只能使用this了
jq的event参数中,
currentTarget是匹配你选择器的元素，就是你的所要元素；
delegateTarget是在监听事件的元素，属于被委托的元素
target同js的event参数里的target，是第一个触发事件的元素，没currentTarget有用（也不一定，比如在bodyclick事件中的应用）
有同学可能说，你要直接引用被设备事件的元素用this就得啦，何必理解currentTarget和target呢。这个想法证明你还只是用下jQuery而已，没用过类似Backbone之类的工具。
Backbone很多地方绑定了this,所以在它的函数中用this是不行的：
var view = Backbone.View.extend({
& el: document.body,
&& events: {
&&& 'click p': 'showText'&&&& // 委托body监听p的click事件&& },
&& showText: function(e){
&&& var p = e.currentT& // [currentTarget]获取选择器匹配的元素&&&& this.log(p.innerHTML);&&& // 看到了吧，this并不指向p元素&& },
&& log: function(msg){
&&& console.log(msg);
虽然JS,JQ中event对象大同小异，但还是有些许区别的，大家是否了解了呢
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具delegate和event的区别_百度知道jQuery中的.on和.delegate的区别？
&!DOCTYPE html&&br&&html lang=&en&&&br&&head&&br& &meta charset=&UTF-8&&&br& &title&j&/title&&br&&/head&&br&&style type=&text/css&&&br& .focused {&br&
background: #&br&}&br&&/style&&br&&br&&body&&br&&div id=&content&&&br&
&input tabIndex=&1&&&br&
&input tabIndex=&2&&&br&
&select tabIndex=&3&&&br&
&option&select menu&/option&&br&
&/select&&br&
&div tabIndex=&4&&&br&
&/div&&br&&/div&&br&&/body&&br&&script type=&text/javascript& src=&jquery-1.11.3.min.js&&&/script&&br&&script type=&text/javascript&&&br& $( &#content& ).delegate( &*&, &focus blur&, function( event ) {&br&
var elem = $( this );&br&
setTimeout(function() {&br&
elem.toggleClass( &focused&, elem.is( &:focus& ) );&br&
}, 0);&br&});&br&&/script&&br&&/html&&br&这段代码实现的是点哪个输入框，哪个输入框背景变色，我不太明白为什么要添加一个setTimeout函数，而且去掉setTimeout函数就没有了效果，而且我自己尝试去掉后，elem.is( &:focus& ) 的值为false，当我把.delegate换成.on时候不存在需要添加setTimeout函数才能实现的问题，请各位试的时候导入下jQuery库
&!DOCTYPE html&&html lang="en"&&head& &meta charset="UTF-8"& &title&j&/title&&/head&&style type="text/css"& .focused {
background: #}&/style&&body&&div id="content"&
&input tabIndex="1"&
&input tabIndex="2"&
&select tabIndex="3"&
&option&select menu&/option&
&div tabIndex="4"&
delegate method calls on method in it. There is no difference between them.
源码种delegate调用的就是on方法，只是参数位置变了，除此之外没什么区别。
已有帐号？
无法登录？
社交帐号登录}