javaScript事件学习小结（四）event的公共成员（属性和方法）
相关阅读：
JavaScript事件学习小结(五）js中事件类型之鼠标事件
https://www.jb51.net/article/86259.htm
JavaScript事件学习小结（一）事件流
https://www.jb51.net/article/86261.htm
javaScript事件学习小结（四）event的公共成员（属性和方法）
https://www.jb51.net/article/86262.htm
JavaScript事件学习小结(二)js事件处理程序
https://www.jb51.net/article/86264.htm
JavaScript事件学习小结（三）js事件对象
一、事件对象的公共成员
1、DOM中的event的公共成员
event对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样，可用的属性和方法不一样。但是，DOM中所有事件都有以下公共成员。
a、对比currentTarget和target
在事件处理程序内部，对象this始终等于currentTarget的值，而target则只是包含事件的实际目标。
举例：页面有个按钮，在body（按钮的父节点）中注册click事件，点按钮时click事件会冒泡到body进行处理。
<body>
<input id="btn" type="button" value="click"/>
<script>
document.body.onclick=function(event){
console.log("body中注册的click事件");
console.log("this===event.currentTarget? "+(this===event.currentTarget)); //true
console.log("currentTarget===document.body?"+(event.currentTarget===document.body)); //true
console.log('event.target===document.getElementById("btn")? '+(event.target===document.getElementById("btn"))); //true
}
</script>
</body>
运行结果为：
b、通过type属性，可以在一个函数中处理多个事件。
原理：通过检测event.type属性，对不同事件进行不同处理。
举例：定义一个handler函数用来处理3种事件：click,mouseover,mouseout。
<body>
<input id="btn" type="button" value="click"/>
<script>
var handler=function(event){
switch (event.type){
case "click":
alert("clicked");
break;
case "mouseover":
event.target.style.backgroundColor="pink";
break;
case "mouseout":
event.target.style.backgroundColor="";
}
};
var btn=document.getElementById("btn");
btn.onclick=handler;
btn.onmouseover=handler;
btn.onmouseout=handler;
</script>
</body>
运行效果：点击按钮，弹出框。鼠标经过按钮，按钮背景色变为粉色；鼠标离开按钮，背景色恢复默认。
c、stopPropagation()和stopImmediatePropagation()对比
同：stopPropagation()和 stopImmediatePropagation()都可以用来取消事件的进一步捕获或冒泡。
异：二者的区别在于当一个事件有多个事件处理程序时，stopImmediatePropagation()可以阻止之后事件处理程序被调用。
举例：
<body>
<input id="btn" type="button" value="click"/>
<script>
var btn=document.getElementById("btn");
btn.addEventListener("click",function(event){
console.log("buttn click listened once");
// event.stopPropagation();//取消注释查看效果
// event.stopImmediatePropagation();//取消注释查看效果
},false);
btn.addEventListener("click",function(){
console.log("button click listened twice");
},false);
document.body.onclick= function (event) {
console.log("body clicked");
}
</script>
</body>
运行效果：
d、eventPhase
eventPhase值在捕获阶段为1，处于目标阶段为2，冒泡阶段为3。
例子：
<body>
<input id="btn" type="button" value="click"/>
<script>
var btn=document.getElementById("btn");
btn.onclick= function (event) {
console.log("按钮DOM0级方法添加事件处理程序eventPhase值为？"+event.eventPhase);
}
btn.addEventListener("click",function(event){
console.log("按钮DOM2级方法添加事件处理程序，且addEventListener第三个参数为true时eventPhase值为？"+event.eventPhase);
},true);
btn.addEventListener("click",function(event){
console.log("按钮DOM2级方法添加事件处理程序，且addEventListener第三个参数为false时eventPhase值为？"+event.eventPhase);
},false);
document.body.addEventListener("click", function (event) {
console.log("body上添加事件处理程序，且在捕获阶段eventPhase值为？"+event.eventPhase);
},true);
document.body.addEventListener("click", function (event) {
console.log("body上添加事件处理程序，且在冒泡阶段eventPhase值为？"+event.eventPhase);
},false);
</script>
运行效果：
2、IE中event的公共成员
IE中的event的属性和方法和DOM一样会随着事件类型的不同而不同，但是也有一些是所有对象都有的公共成员，且这些成员大部分有对应的DOM属性或方法。
以上所述是小编给大家介绍的javaScript事件学习小结（四）event的公共成员（属性和方法）的相关知识，希望对大家有所帮助，如果大家有疑问欢迎给我留言！
相关文章
这篇文章主要介绍了CSS中position属性之fixed实现div居中的相关资料,需要的朋友可以参考下2015-12-12
这篇文章主要介绍了JS实现监控微信小程序的原理,本文通过实例代码相结合的形式给大家介绍的非常详细，需要的朋友可以参考下2018-06-06
这篇文章主要介绍了JavaScript实现弹出子窗口并传值给父窗口,方法很简单，这里推荐给大家，需要的朋友可以参考下2014-12-12
这篇文章主要介绍了antd项目如何实现彩蛋效果,首先在components目录下创建Transform目录，包括index.css、index.js，index.js是主要的逻辑代码，下面对代码进行分析，需要的朋友可以参考下2022-09-09
这篇文章主要为大家详细介绍了js实现查询商品案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-07-07
这篇文章主要为大家详细介绍了小程序实现日历打卡功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
这篇文章主要介绍了浅谈js中变量初始化的相关资料,需要的朋友可以参考下2015-02-02
这篇文章主要为大家详细介绍了前端页面文件拖拽上传模块js代码示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要为大家详细介绍了js仿新浪微博消息发布功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
数据排序谁最快(javascript中的Array.prototype.sort PK 快速排序)
今天在51js论坛中看到一个网友发布了一个javasctipt实现的快速排序的算法，前些日子工作中也涉及到javasctipt中数据排序的应用，当时为了提高排序速度，使用的也是快速排序的算法。2007-01-01
最新评论