文档章节

JS和JQ的event对象对比和应用

波利beryl
 波利beryl
发布于 2014/11/17 18:11
字数 685
阅读 152
收藏 7

 

摘要 js和jq的event对象大同小异,本文简单对比下它们的'click'事件下的不同和应用

js jquery jq event


代码测试:

?

1
2
3
4
5
6
7
<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>

结果分析:

?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
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就得啦,何必理解currentTargettarget呢。这个想法证明你还只是用下jQuery而已,没用过类似Backbone之类的工具。

Backbone很多地方绑定了this,所以在它的函数中用this是不行的:

?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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);
   }
});

本文转载自:

上一篇: 谷仓◆
下一篇: 绑定live bind click
波利beryl
粉丝 21
博文 30
码字总数 5582
作品 0
成都
私信 提问
JS和JQ的event对象对比和应用

currentTarget 事件冒泡阶段所在的DOM target, originalTarget原始的DOM 代码测试: 结果分析: 总结: js的event参数中,不管是, , 都是指向第一个触发事件的元素(还没冒泡),而在click事...

前端届的科比
2014/08/11
1K
0
Array & Event & Dom 兼容总结

Dom 元素节点 & 属性节点 & 文本节点 nodeName & tagName & nodeValue 测试代码 nodeName与tagName在浏览器中没有兼容问题,返回值是全大写。 下面是文本节点的属性 下面是元素节点 下面是文...

烽穹寒渊
2016/08/25
0
0
React学习(4)-理清React的工作方式

前言 在接触React之前,我们也许习惯了DOM编程,那它相比于原生JS,JQ编程方式,究竟有什么区别?React的工作方式是什么样子的?所谓的虚拟DOM又指的是什么?以及React的工作方式的优点有哪些? 那么...

itclanCoder
07/29
0
0
JavaWeb05-HTML篇笔记(一)

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒
2018/05/10
0
0
JS杂谈系列-js的认识和js相关技术的了解

其实这篇博客应该是在讲js之前写的,现在算是补上的内容吧,我写的都是自己了解的,可不是凭空捏造,当然很多会记不清,错了及时提出啊!我写的时候也是写有用的,不会写一点子扯淡的玩意,像...

透笔度
2015/08/16
187
0

没有更多内容

加载失败,请刷新页面

加载更多

一起来学Java8(四)——复合Lambda

在一起来学Java8(二)——Lambda表达式中我们学习了Lambda表达式的基本用法,现在来了解下复合Lambda。 Lambda表达式的的书写离不开函数式接口,复合Lambda的意思是在使用Lambda表达式实现函...

猿敲月下码
30分钟前
9
0
debian10使用putty配置交换机console口

前言:Linux的推广普及,需要配合解决实际应用方能有成效! 最近强迫自己用linux进行实际工作,过程很痛苦,还好通过网络一一解决,感谢各位无私网友博客的帮助! 系统:debian10 桌面:xfc...

W_Lu
今天
10
0
aelf Enterprise 0.8.0 beta有奖公测,“Bug奖金计划”重磅开启

2019年9月30日,aelf Enterprise 0.8.0 beta版正式发布。aelf Enterprise 0.8.0 beta是一个完备的区块链系统, 包含完备的区块链系统、开发套件、开发文档、以及配套的基础应用和基础服务。 ...

AELF开发者社区
今天
10
0
oracle 初始化数据库脚本

create user lpf identified by 123456; create tablespace lpf_ts_cms datafile '/opt/app/oracle/product/11.2.0/lpf.dbf' size 200M; alter user lpf default tablespace lpf_ts_cms; sel......

internetafei
今天
8
0
深入了解Redis底层数据结构

说明 说到Redis的数据结构,我们大概会很快想到Redis的5种常见数据结构:字符串(String)、列表(List)、散列(Hash)、集合(Set)、有序集合(Sorted Set),以及他们的特点和运用场景。不过它们是...

TurboSanil
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部