当前位置:  首页  >  PHP资讯  >  业界资讯

JavaScript事件"事件对象"的注意要点

这篇文章主要介绍了JavaScript事件,告诉大家"事件对象"的注意要点,感兴趣的小伙伴们可以参考一下

在触发DOM上的某个事件时,会产生一个事件对象event。

DOM中的事件对象

兼容DOM的浏览器会将一个event对象传入到事件处理程序中。event对象包含与创建它的特定事件有关的属性和方法。除法的事件类型不一样,可用的属性方法就不一样。不过,所有的事件都会有下表列出的成员。

下面列出了 2 级 DOM 事件标准定义的属性:

  • bubbles: 返回布尔值,指示事件是否是起泡事件类型。
  • cancelable: 返回布尔值,指示事件是否可拥可取消的默认动作。
  • currentTarget: 返回其事件监听器触发该事件的元素。
  • eventPhase: 返回事件传播的当前阶段。
  • target: 返回触发此事件的元素(事件的目标节点)。
  • timeStamp: 返回事件生成的日期和时间。
  • type: 返回当前 Event 对象表示的事件的名称。

下面列出了 2 级 DOM 事件标准定义的方法。IE 的事件模型不支持这些方法:

  • initEvent(): 初始化新创建的 Event 对象的属性。
  • preventDefault(): 通知浏览器不要执行与事件关联的默认动作。
  • stopPropagation(): 不再派发事件。

this、target、currentTarget

在事件处理程序的内部,对象this始终等于currentTarget的值,而target则只包含事件的实际目标。如果直接将事件处理程序指定给了目标元素,则this、currentTarget和target包含相同的值。如:

 var btn = document.querySelector("#btn"); btn.Onclick=function () { console.log(event.currentTarget === this); //true console.log(event.target === this); //true }

由于click事件的目标是btn按钮,所以这三个值是相等的。如果事件处理程序在按钮的父节点(document.body)中,那么这些值则不相同。如:

 var btn = document.querySelector("#btn"); document.body.Onclick=function () { console.log(event.currentTarget === document.body); //true console.log(this === document.body); //true console.log(event.target === btn); //true 因为btn没有注册事件处理程序,所以该click事件就冒泡到了document.body }

在这里,this和currentTarget都是document.body,因为事件处理程序是注册到这个元素上的。但是target元素却等于按钮元素,因为它是click事件的真正目标。由于按钮并没有注册事件处理程序,结果click事件就冒泡到了document.body,在那里事件才能得到处理。

type

在需要通过一个函数处理多个事件时,可以使用type属性。如:

 //获取按钮 var btn = document.querySelector("#btn"); //设置多个事件 var handler = function() { //检测事件的类型 switch (event.type) { case "click": console.log("i click it"); break; case "mouseover": console.log("i enter it"); break; case "mouseout": console.log("i leave it"); break; } } //给响应的事件赋值 btn.Onclick= handler; btn.Onmouseover= handler; btn.Onmouseout= handler; preventDefault() 

要阻止特定事件的默认行为,可以使用该方法。如:

 var aTags = document.getElementsByTagName("a"); for (var i = 0; i  

以上代码即屏蔽了网页上全部的a标签超链接功能。要注意的是,只有cancelable属性设置为true的事件,才可以使用preventDefault()来取消其默认行为。

stopPropagation()

立即停止事件在DOM层次中的传播,即取消进一步的事件捕获或冒泡。例如,直接添加到一个按钮的事件处理程序可以调用该方法,从而避免触发注册在document.body上面的事件处理程序。如:

 var btn = document.getElementById("btn"); btn.Onclick= function () { console.log("btn clicked"); // event.stopPropagation(); }; window.Onclick= function () { console.log("clicked"); }; //单击一下的结果: //btn clicked //clicked 

又如:

 var btn = document.getElementById("btn"); btn.Onclick= function () { console.log("btn clicked"); event.stopPropagation(); }; window.Onclick= function () { console.log("clicked"); }; //单击一下的结果: //btn clicked 

eventPhase

该属性用来确定事件当前正位于事件流的哪个阶段。

1、如果是捕获阶段则等于1;
2、如果是目标对象阶段则等于2;
3、如果是冒泡阶段则等于3;
如:

 var btn = document.getElementById("btn"); document.body.addEventListener("click", function() { console.log("bodyListener" + event.eventPhase); }, true) //捕获阶段 btn.Onclick= function() { console.log("btn" + event.eventPhase); } //目标对象阶段,实际上属于冒泡阶段(在btn上) document.body.Onclick= function() { console.log("body" + event.eventPhase); } //冒泡阶段(在body上) 

又如:

 var btn = document.getElementById("btn"); document.body.addEventListener("click", function() { console.log(event.eventPhase); //1 console.log(event.currentTarget); //HTMLBodyElement }, true); btn.addEventListener("click", function() { console.log(event.eventPhase); //2 console.log(event.currentTarget); //HTMLInputElement }); document.body.addEventListener("click", function() { console.log(event.eventPhase); //3 console.log(event.currentTarget); //HTMLBodyElement }); 

流程大概是:

document.body 捕获阶段 --> btn 目标对象阶段 --> document.body 冒泡阶段

以上就是本文的全部内容,希望对大家的学习有所帮助。

内容推荐:免费高清PNG素材下载
吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有 京ICP备19059560号-4