浅谈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;
}
}
};
上面的代码封装了事件处理中需要的方法,包括添加事件、移除事件、获取事件对象、获取事件的目标元素、阻止默认行为和阻止冒泡。
浅谈JavaScript的事件(事件对象)的更多相关文章
- 浅谈JavaScript中的事件
引言 Html页面与JavaScript之间的交互是通过事件来完成的.事件,就是文档或者浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(处理程序)来预订事件,以便事件发生时执行相应的代码.这在传 ...
- 浅谈javascript的Touch事件
js的touch事件,一般用于移动端的触屏滑动 代码如下: $(function(){ document.addEventListener("touchmove", _touch, ...
- 浅谈Javascript单线程和事件循环
单线程 Javascript 是单线程的,意味着不会有其他线程来竞争.为什么是单线程呢? 假设 Javascript 是多线程的,有两个线程,分别对同一个元素进行操作: function change ...
- 通过一道笔试题浅谈javascript中的promise对象
因为前几天做了一个promise对象捕获错误的面试题目,所以这几天又重温了一下promise对象.现在借这道题来分享下一些很基础的知识点. 下面是一个面试题目,三个promise对象捕获错误的例子,返 ...
- 浅谈javascript函数节流
浅谈javascript函数节流 什么是函数节流? 函数节流简单的来说就是不想让该函数在很短的时间内连续被调用,比如我们最常见的是窗口缩放的时候,经常会执行一些其他的操作函数,比如发一个ajax请求等 ...
- 浅谈JavaScript中的闭包
浅谈JavaScript中的闭包 在JavaScript中,闭包是指这样一个函数:它有权访问另一个函数作用域中的变量. 创建一个闭包的常用的方式:在一个函数内部创建另一个函数. 比如: functio ...
- 浅谈 JavaScript 编程语言的编码规范
对于熟悉 C/C++ 或 Java 语言的工程师来说,JavaScript 显得灵活,简单易懂,对代码的格式的要求也相对松散.很容易学习,并运用到自己的代码中.也正因为这样,JavaScript 的编 ...
- 浅谈javascript的原型及原型链
浅谈javascript的原型及原型链 这里,我们列出原型的几个概念,如下: prototype属性 [[prototype]] __proto__ prototype属性 只要创建了一个函数,就会为 ...
- 浅谈JavaScript中的null和undefined
浅谈JavaScript中的null和undefined null null是JavaScript中的关键字,表示一个特殊值,常用来描述"空值". 对null进行typeof类型运 ...
- 浅谈JavaScript中的正则表达式(适用初学者观看)
浅谈JavaScript中的正则表达式 1.什么是正则表达式(RegExp)? 官方定义: 正则表达式是一种特殊的字符串模式,用于匹配一组字符串,就好比用模具做产品,而正则就是这个模具,定义一种规则去 ...
随机推荐
- GT使用说明
GT文档:https://gt.qq.com/docs.html GT Android版的详细使用手册: https://gt.qq.com/docs/a/GTAndroidUserGuide.pdf
- 【LeetCode】Add Two Numbers(两数相加)
这道题是LeetCode里的第2道题. 题目要求: 给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字. 如果,我们将 ...
- Linux中执行shell脚本命令的4种方法总结
bash shell 脚本的方法有多种,现在作个小结.假设我们编写好的shell脚本的文件名为hello.sh,文件位置在/data/shell目录中并已有执行权限. 方法一:切换到shell脚本所在 ...
- POJ-1236 Network of Schools,人生第一道Tarjan....
Network of Schools 题意:若干个学校组成一个计算机网络系统,一个学校作为出发端连接着若干个学校,信息可以传送到这些学校.被链接的学校不需要再次与出发端相连,现在问你:A:最少选几个学 ...
- arc和mrc混用
arc项目中引用非arc代码 加上“-fno-objc-arc” 非arc项目中引用arc代码 加上“-fobjc-arc”
- BZOJ3572 [Hnoi2014]世界树 【虚树 + 树形dp】
题目 世界树是一棵无比巨大的树,它伸出的枝干构成了整个世界.在这里,生存着各种各样的种族和生灵,他们共同信奉着绝对公正公平的女神艾莉森,在他们的信条里,公平是使世界树能够生生不息.持续运转的根本基石. ...
- P1133 教主的花园 (动态规划)
题目描述 教主有着一个环形的花园,他想在花园周围均匀地种上n棵树,但是教主花园的土壤很特别,每个位置适合种的树都不一样,一些树可能会因为不适合这个位置的土壤而损失观赏价值. 教主最喜欢 3种树,这3种 ...
- 【强化学习】百度云BCC openai gym 环境配置
openai gym是RL算法的测试床.为了直观和便于调试,我们需要可视化界面.然而远程服务器使用openGL的问题比较棘手,这篇博客记录在百度云BCC上配置openai gym环境的注意事项. 按照 ...
- Java的反射机制和动态代理
介绍Java注解的时候,多次提到了Java的反射API.与javax.lang.model不同的是,通过反射API可以获取程序在运行时刻的内部结构.反射API中提供的动态代理也是非常强大的功能,可以原 ...
- 等价表达式(codevs 1107 答案错误)
题目描述 Description 明明进了中学之后,学到了代数表达式.有一天,他碰到一个很麻烦的选择题.这个题目的题干中首先给出了一个代数表达式,然后列出了若干选项,每个选项也是一个代数表达式,题目的 ...