JS和JQ的event对象区别分析

前端之家收集整理的这篇文章主要介绍了JS和JQ的event对象区别分析前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

代码测试:

代码如下:
test text

结果分析:

代码如下:
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:{ x: 58, y: 13, 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, jQuery211024030584539286792: 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是不行的:

代码如下:
获取选择器匹配的元素 this.log(p.innerHTML); // 看到了吧,this并不指向p元素 }, log: function(msg){ console.log(msg); } });

虽然JS,JQ中event对象大同小异,但还是有些许区别的,大家是否了解了呢

猜你在找的JavaScript相关文章