浅谈JavaScript的事件(事件对象)
在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含这所有与事件有关的信息。包括导致事件的元素、事件的类型和事件的相关信息。例如鼠标操作的事件中,会包含鼠标的位置信息。而键盘触发的事件会包含与按下的键有关信息。所有浏览器都支持event对象,但支持方式不同。
- DOM中的事件对象
兼容dom的浏览会将一个event对象传递到事件处理程序中。
1 var aa=document.getElementById("aa");
2 aa.onclick=function(event){
3 console.log(event.type);
4 }
5 aa.addEventListener("click",function(event){
6 console.log(event.type);
7 },false);
上面的代码,通过两种方式指定事件处理程序,但是他们可以获得event对象。event.type都是输出click。
属性/方法 |
类型 |
读/写 |
说明 |
---|---|---|---|
bubbles |
Boolean |
只读 |
事件是否冒泡 |
cancelable |
Boolean |
只读 |
是否可以取消事件的默认行为 |
currentTarget |
Element |
只读 |
事件处理程序正在处理的那个元素 |
defaultPrevented |
Boolean |
只读 |
是否已经调用了preventDefault方法 |
detail |
Integer |
只读 |
事件的细节信息 |
eventPhase |
Integer |
只读 |
调用事件处理程序的阶段 |
preventDefault() |
Function |
只读 |
取消事件的默认行为 |
stopImmediatePropagation() |
Function |
只读 |
取消事件的进一步捕获或者冒泡 |
stopPropagation() |
Function |
只读 |
取消事件的进一步冒泡或者捕获 |
target |
Element |
只读 |
事件的目标 |
trusted |
Boolean |
只读 |
为true表示事件是浏览器生成,false表示JavaScript添加 |
type |
String |
只读 |
被触发事件的类型 |
view |
AbstarctView |
只读 |
与事件关联的抽象视图 |
上面的表格列出了event的属性以及方法,在事件处理程序内部,对象this始终等于currentTarget的值,而target则包含事件的实际目标。如果直接将事件处理程序指定给了目标元素,则this、target和currentTaget包含相同的值。
1 aa.addEventListener("click",function(event){
2 console.log(event.target==this);//true
3 console.log(event.currentTarget==this);//true
4 },false);
上面的代码中说明currentTarget、target和this的值是相同的。通过下面的代码,我们可以看出this就是指向元素本身。
1 aa.addEventListener("click",function(event){
2 //console.log(event.target==this);//true
3 //console.log(event.currentTarget==this);//true
4 console.log(this==document.getElementById("aa"));//true
5 console.log(event.currentTarget==document.getElementById("aa"));//true
6 },false);
要阻止特定事件的默认行为,可以使用preventDefault方法。例如a标签,在点击的时候,会跳转到指定的url链接,如果想阻止该行为的发生,可以调用preventDefault方法。
1 document.getElementById("hh").onclick=function(event){
2 event.preventDefault();
3 }
上面的代码将会阻止跳转事件的发生。只有cancelable为true,才能调用该方法。通过调用stopPropagation方法能够阻止事件的冒泡。
1 document.getElementById("hh").onclick=function(event){
2 console.log(event.eventPhase);//2
3 event.preventDefault();
4 }
5 document.body.onclick=function(event){
6 console.log(event.eventPhase);//3
7 }
8 document.body.addEventListener("click",function(event){
9 console.log(event.eventPhase);//1
10 },true);
上面的代码中输出是1,2,3。由此可见,document.body.addEventListener最先执行,它发生在事件的冒泡阶段,document.getElementById("hh")第二个执行,发生在事件的处理程序目标阶段。document.body.onclick发生在事件的冒泡阶段。
- IE中的事件对象
在IE中方式event对象可以通过多种方式,取决于指定事件处理程序的方法。
1 aa.onclick=function(){
2 var event=window.event;
3 console.log(event.type);
4 }
上面的代码,我们通过window.event获取了event对象,并且可以取得它的属性和方法。但是如果通过attachEvent添加事件,则事件处理程序会传递一个event对象。
IE的event对象同样包含创建它的相关属性和方法,与DOM事件一样,也会因为事件类型的不同而不同。
属性/方法 |
类型 |
读写 |
说明 |
---|---|---|---|
cancelBubble |
Boolean |
读/写 |
默认false,设置为true,取消事件冒泡 |
returnValue |
Boolean |
读/写 |
默认为true,设置为false,取消事件的默认行为 |
srcElement |
Element |
只读 |
事件的目标,与target相同 |
因为事件处理程序的指定方式不同,故它的作用域也不相同。最好不用this,可以使用srcElement来获取元素。
如前所述,returnValue属性相当于DOM中的preventDefault方法,它们的作用都是取消给定事件的默认行为。只要将returnValue设置为false,就会阻止默认事件的发生。
1 EventUtil.addEvent(document.getElementById("hh"),"click",function(event){
2 event.returnValue=false;
3 });
- 跨浏览器的事件对象
虽然DOM与IE的event对象不同,但是可以通过js库,来解决浏览器的兼容性。
1 var EventUtil={
2 /**
3 * 添加事件
4 * @param {Object} element:元素本身
5 * @param {Object} type:事件名称
6 * @param {Object} fn:事件处理程序
7 */
8 addEvent:function(element,type,fn){
9 if(element.addEventListener){
10 element.addEventListener(type,fn,false);
11 }
12 else if(element.attachEvent){
13 element.attachEvent("on"+type,fn);
14 }
15 else{
16 element["on"+type]=fn;
17 }
18 },
19 /**
20 * 移除事件
21 * @param {Object} element:元素本身
22 * @param {Object} type:事件名称
23 * @param {Object} fn:事件处理程序
24 */
25 removeEvent:function(element,type,fn){
26 if(element.removeEventListener){
27 element.removeEventListener(type,fn,false);
28 }
29 else if(element.detachEvent){
30 element.detachEvent("on"+type,fn);
31 }
32 else{
33 element["on"+type]=null;
34 }
35 },
36 /**
37 * 获取事件对象
38 * @param {Object} event
39 */
40 getEvent:function(event){
41 return event||window.event;
42 },
43 /**
44 * 获取事件处理程序作用的目标元素
45 * @param {Object} event
46 */
47 getTarget:function(event){
48 return event.currentTarget||event.srcElement;
49 },
50 /**
51 * 取消默认行为
52 * @param {Object} event
53 */
54 preventDefault:function(event){
55 if(event.preventDefault){
56 event.preventDefault();
57 }
58 else{
59 event.returnValue=false;
60 }
61 },
62 /**
63 * 取消冒泡
64 * @param {Object} event
65 */
66 stopPropagation:function(event){
67 if(event.stopPropagation){
68 event.stopPropagation();
69 }
70 else{
71 event.cancelBubble=true;
72 }
73 }
74 };
上面的代码封装了事件处理中需要的方法,包括添加事件、移除事件、获取事件对象、获取事件的目标元素、阻止默认行为和阻止冒泡。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 第9天:NLP补充——需要的基本知识
- 6.AVCodecContext和AVCodec
- WebAssembly之使用JS调用C/C++接口
- WebAssembly之emcc编译命令
- 食堂店小二儿教你学会栈
- Istio流量管理实现机制深度解析-基于1.4.0更新
- Istio 运维实战系列(1):应用容器对 Envoy Sidecar 的启动依赖问题
- R语言基于Reactome数据库的富集分析
- WiredTiger存储引擎之五:与事务相关的数据结构以及并发控制机制
- Tomcat NIO(8)-Poller线程的阻塞与唤醒
- 你的第一个React App (一 ) - 项目初始化
- 被JDK坑的没商量?来试试这些方法吧
- k8s 代码走读---client-go 编程交互测试代码
- C#网络类智能开关控制板实例
- Flume拦截器实现按照事件时间接入HDFS