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

 更新时间:2016年06月09日 11:32:21   作者:starof  
这篇文章主要介绍了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的公共成员(属性和方法)的相关知识,希望对大家有所帮助,如果大家有疑问欢迎给我留言!

相关文章

  • JavaScript 中实现 use strict的方法及优势

    JavaScript 中实现 use strict的方法及优势

    本教程将讨论JavaScript中的use strict特性,在这里,我们将通过不同的示例了解如何在JavaScript代码语句中创建和执行use strict关键字,需要的朋友可以参考下
    2023-09-09
  • 如何使用less实现随机下雪动画详解

    如何使用less实现随机下雪动画详解

    这篇文章主要给大家介绍了关于如何使用less实现随机下雪动画的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-01-01
  • 亲自教你TypeScript 项目搭建过程

    亲自教你TypeScript 项目搭建过程

    这篇文章主要介绍了亲自教你TypeScript 项目搭建过程,我记得前一天,我们配置过一份 webpack 配置,直接复制过来使用,这里就不多说了,然后就是在项目中引入我们的 less,需要的朋友可以参考下
    2022-11-11
  • Promise中的then链机制用法详解

    Promise中的then链机制用法详解

    这篇文章给大家详细介绍了Promise中的then链机制用法,每一次 .then都会返回一个新的promise实例,文中通过代码示例给大家介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • ES10的13个新特性示例(小结)

    ES10的13个新特性示例(小结)

    这篇文章主要介绍了ES10的13个新特性示例(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • PyQt中QLabel标签组件使用指南

    PyQt中QLabel标签组件使用指南

    QLabel是PyQt中用于显示文本和图像的组件,本文详细介绍了其基本用法和高级特性,首先,介绍如何创建QLabel,以及如何用它来显示图像,接着,探讨了如何使用HTML标签格式化文本,设置文本对齐方式,以及如何实现自动换行
    2024-10-10
  • Echarts 3D散点图实战案例

    Echarts 3D散点图实战案例

    这篇文章主要给大家介绍了关于Echarts 3D散点图的相关资料, Echarts散点图是一种常用的数据可视化图表类型,用于展示两个或多个维度的数据分布情况,需要的朋友可以参考下
    2023-11-11
  • JavaScript实现职责链模式概述

    JavaScript实现职责链模式概述

    这篇文章主要介绍了JavaScript实现职责链模式概述,详细的介绍了什么是职责链模式和实现方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-01-01
  • JS实现列表的响应式排版(推荐)

    JS实现列表的响应式排版(推荐)

    列表的响应式排版,首先每行固定好个数,然后随页面宽度调整个数和大小,保证图片的的可读性及美观。接下来小编给大家带来实现思路介绍,一起看看吧
    2016-09-09
  • 开源一个微信小程序仪表盘组件过程解析

    开源一个微信小程序仪表盘组件过程解析

    这篇文章主要介绍了开源一个微信小程序仪表盘组件过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07

最新评论