首页 > 代码库 > js和jq的event对象对比和应用
js和jq的event对象对比和应用
代码测试:
<div id="test"><p>test text<p></div> <script src=http://www.mamicode.com/"vendor/jquery-2.1.1.js"></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 }总结:
- js的event参数中,不管是
target
,toElement
,srcElement
都是指向第一个触发事件的元素(还没冒泡),而fromElement
在click事件中为null,所以,你如果是设置包含很多元素的父容器parent事件,那么触发事件的很可能是这个parent的子元素。
因此,在实际应用中,如果要引用parent,那你只能使用this
了 - jq的event参数中,
currentTarget
是匹配你选择器的元素,就是你的所要元素delegateTarget
是在监听事件的元素,属于被委托的元素target
同js的event参数里的target
,是第一个触发事件的元素,没currentTarget
有用
有同学可能说,你要直接引用被设备事件的元素用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); } });
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。