当前位置：首页 > 资讯 > 技术文档

javaScript事件学习小结（四）event的公共成员（属性和方法）

时间：2020-02-16 19:43 编辑：来源：阅读：
扫一扫，手机访问

摘要：javaScript事件学习小结（四）event的公共成员（属性和方法）

[b]相关阅读：[/b] JavaScript事件学习小结(五）js中事件类型之鼠标事件 [url=http://www.1sucai.cn/article/86259.htm]http://www.1sucai.cn/article/86259.htm[/url] JavaScript事件学习小结（一）事件流 [url=http://www.1sucai.cn/article/86261.htm]http://www.1sucai.cn/article/86261.htm[/url] javaScript事件学习小结（四）event的公共成员（属性和方法） [url=http://www.1sucai.cn/article/86262.htm]http://www.1sucai.cn/article/86262.htm[/url] JavaScript事件学习小结(二)js事件处理程序 [url=http://www.1sucai.cn/article/86264.htm]http://www.1sucai.cn/article/86264.htm[/url] JavaScript事件学习小结（三）js事件对象 [b]一、事件对象的公共成员[/b] [b]1、DOM中的event的公共成员[/b] event对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样，可用的属性和方法不一样。但是，DOM中所有事件都有以下公共成员。 [img]http://files.jb51.net/file_images/article/201606/201669112651432.png?201659112713[/img] 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>

运行结果为： [url=http://www.cnblogs.com/starof/p/4096198.html][img]http://files.jb51.net/file_images/article/201606/2016060911251340.jpg[/img] [/url] 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>

运行效果： [url=http://www.cnblogs.com/starof/p/4096198.html][img]http://files.jb51.net/file_images/article/201606/2016060911251443.jpg[/img] [/url] 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>

运行效果： [url=http://www.cnblogs.com/starof/p/4096198.html][img]http://files.jb51.net/file_images/article/201606/2016060911251544.jpg[/img] [/url] [b]2、IE中event的公共成员[/b] IE中的event的属性和方法和DOM一样会随着事件类型的不同而不同，但是也有一些是所有对象都有的公共成员，且这些成员大部分有对应的DOM属性或方法。 [img]http://files.jb51.net/file_images/article/201606/201669113018881.png?201659113053[/img] 以上所述是小编给大家介绍的javaScript事件学习小结（四）event的公共成员（属性和方法）的相关知识，希望对大家有所帮助，如果大家有疑问欢迎给我留言！

全部评论(0)

上一篇：js判断输入是否为数字的具体实例
下一篇：关于javascript的“静态类"

资讯排行榜
更多>>