JS和JQ的event对象区别分析_Javascript教程-查字典教程网
JS和JQ的event对象区别分析
JS和JQ的event对象区别分析
发布时间:2016-12-30 来源:查字典编辑
摘要:代码测试:复制代码代码如下:testtexttest.addEventListener('click',function(e){consol...

代码测试:

复制代码 代码如下:

<div id="test"><p>test text<p></div>

<script src="vendor/jquery-2.1.1.js"></script>

<script>

test.addEventListener('click', function(e){console.log(e);}, false),

$('#test').on('click', function(e){console.log(e)});

</script>

结果分析:

复制代码 代码如下:

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: 1407761742842,

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是不行的:

复制代码 代码如下:

var view = Backbone.View.extend({

el: document.body,

events: {

'click p': 'showText' // 委托body监听p的click事件 },

showText: function(e){

var p = e.currentTarget; // [currentTarget]获取选择器匹配的元素 this.log(p.innerHTML); // 看到了吧,this并不指向p元素 },

log: function(msg){

console.log(msg);

}

});

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

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类