浅谈JavaScript的事件(事件对象)
在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含这所有与事件有关的信息。包括导致事件的元素、事件的类型和事件的相关信息。例如鼠标操作的事件中,会包含鼠标的位置信息。而键盘触发的事件会包含与按下的键有关信息。所有浏览器都支持event对象,但支持方式不同。
- DOM中的事件对象
兼容dom的浏览会将一个event对象传递到事件处理程序中。
var aa=document.getElementById("aa");
aa.onclick=function(event){
console.log(event.type);
}
aa.addEventListener("click",function(event){
console.log(event.type);
},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包含相同的值。
aa.addEventListener("click",function(event){
console.log(event.target==this);//true
console.log(event.currentTarget==this);//true
},false);
上面的代码中说明currentTarget、target和this的值是相同的。通过下面的代码,我们可以看出this就是指向元素本身。
aa.addEventListener("click",function(event){
//console.log(event.target==this);//true
//console.log(event.currentTarget==this);//true
console.log(this==document.getElementById("aa"));//true
console.log(event.currentTarget==document.getElementById("aa"));//true
},false);
要阻止特定事件的默认行为,可以使用preventDefault方法。例如a标签,在点击的时候,会跳转到指定的url链接,如果想阻止该行为的发生,可以调用preventDefault方法。
document.getElementById("hh").onclick=function(event){
event.preventDefault();
}
上面的代码将会阻止跳转事件的发生。只有cancelable为true,才能调用该方法。通过调用stopPropagation方法能够阻止事件的冒泡。
document.getElementById("hh").onclick=function(event){
console.log(event.eventPhase);//
event.preventDefault();
}
document.body.onclick=function(event){
console.log(event.eventPhase);//
}
document.body.addEventListener("click",function(event){
console.log(event.eventPhase);//
},true);
上面的代码中输出是1,2,3。由此可见,document.body.addEventListener最先执行,它发生在事件的冒泡阶段,document.getElementById("hh")第二个执行,发生在事件的处理程序目标阶段。document.body.onclick发生在事件的冒泡阶段。
- IE中的事件对象
在IE中方式event对象可以通过多种方式,取决于指定事件处理程序的方法。
aa.onclick=function(){
var event=window.event;
console.log(event.type);
}
上面的代码,我们通过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,就会阻止默认事件的发生。
EventUtil.addEvent(document.getElementById("hh"),"click",function(event){
event.returnValue=false;
});
- 跨浏览器的事件对象
虽然DOM与IE的event对象不同,但是可以通过js库,来解决浏览器的兼容性。
var EventUtil={
/**
* 添加事件
* @param {Object} element:元素本身
* @param {Object} type:事件名称
* @param {Object} fn:事件处理程序
*/
addEvent:function(element,type,fn){
if(element.addEventListener){
element.addEventListener(type,fn,false);
}
else if(element.attachEvent){
element.attachEvent("on"+type,fn);
}
else{
element["on"+type]=fn;
}
},
/**
* 移除事件
* @param {Object} element:元素本身
* @param {Object} type:事件名称
* @param {Object} fn:事件处理程序
*/
removeEvent:function(element,type,fn){
if(element.removeEventListener){
element.removeEventListener(type,fn,false);
}
else if(element.detachEvent){
element.detachEvent("on"+type,fn);
}
else{
element["on"+type]=null;
}
},
/**
* 获取事件对象
* @param {Object} event
*/
getEvent:function(event){
return event||window.event;
},
/**
* 获取事件处理程序作用的目标元素
* @param {Object} event
*/
getTarget:function(event){
return event.currentTarget||event.srcElement;
},
/**
* 取消默认行为
* @param {Object} event
*/
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}
else{
event.returnValue=false;
}
},
/**
* 取消冒泡
* @param {Object} event
*/
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}
else{
event.cancelBubble=true;
}
}
};
上面的代码封装了事件处理中需要的方法,包括添加事件、移除事件、获取事件对象、获取事件的目标元素、阻止默认行为和阻止冒泡。
最新文章
- 网络通信简单实例BIO,NIO,AIO
- IOS基础面试题
- Python中的*args和**kwarg
- 1001Sum Problem
- JavaWeb项目开发案例精粹-第2章投票系统-004action层
- React Native 实现MQTT 推送调研 (1)
- C++函数二义性问题,我怎么感觉编译器有偷懒嫌疑!!!
- IIS 7.5 配置伪静态
- python标准库之字符编码详解
- Ubuntu下安装Pyqt4
- ES6 系列之 Babel 是如何编译 Class 的(下)
- Flutter的Appbar
- HDU 4804 Campus Design
- MY_使用selenium自动登录126/163邮箱并发送邮件
- cxGrid使用汇总4
- JS-Object(2) 原型对象 ,prototype属性。
- 浅谈Socket长连+多线程
- Open XML操作Excel导入数据
- 请问在一个命令上加什么参数可以实现下面命令的内容在同一行输出。 echo ";zhaokang";;echo ";zhaokang";
- 初进JAVA职场面试小技巧:一个老学长的吐血之作!
热门文章
- 读CSS DIV网页样式与布局心得体会
- HDU 3879 Base Station
- Codeforces Round #204 (Div. 2)
- 【java基础 8】垃圾收集算法及内存分配策略
- python ConfigParser 学习
- 【2018.9.20】JOI 2017 Final T3「JOIOI 王国 / The Kingdom of JOIOI」
- 【bzoj1299】[LLH邀请赛]巧克力棒 博弈+模拟
- git提交之后没有push,代码被覆盖之后恢复
- mock数据。根据表中一天的数据模拟其他日期的数据
- 洛谷 [P2216] 理想的正方形