JavaScript事件对象event

最新推荐文章于 2022-06-29 23:03:15 发布

原创最新推荐文章于 2022-06-29 23:03:15 发布 · 167 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JavaScript 专栏收录该内容

94 篇文章

订阅专栏

本文详细介绍了DOM中的事件对象及其属性和方法，包括eventPhase、currentTarget、target等关键概念，并展示了如何使用preventDefault()和stopPropagation()来控制事件的行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是事件对象？

在触发 DOM上的某个事件时，会产生一个事件对象 event，这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。

DOM中的事件对象

兼容 DOM的浏览器会将一个 event 对象传入到事件处理程序中。无论指定事件处理程序时使用什么方法（DOM0级或 DOM2级），都会传入 event 对象。

在事件处理程序内部，对象 this 始终等于 currentTarget（其事件处理程序当前正在处理事件的那个元素）的值，而 target （事件的目标）则只包含事件的实际目标。

如果直接将事件处理程序指定给了目标元素，则 this、currentTarget 和 target 包含相同的值。

例如：

var btn = document.getElementById("myBtn"); 
btn.onclick = function(event){
     alert(event.currentTarget === this);    //true
     alert(event.target === this);         //true 
     };

又如：

document.body.onclick = function(event){     
alert(event.currentTarget === document.body);   //true     
alert(this === document.body);                  //true     
alert(event.target === 
document.getElementById("myBtn"));    //true };

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

要阻止特定事件的默认行为，可以使用 preventDefault()方法。

stopPropagation()方法用于立即停止事件在 DOM 层次中的传播，即取消进一步的事件捕获或冒泡。

例如：直接添加到一个按钮的事件处理程序可以调用 stopPropagation()，从而避免触发注册在 document.body 上面的事件处理程序，如下面的例子所示。

var btn = document.getElementById("myBtn"); 
btn.onclick = function(event){
     alert("Clicked");    
      event.stopPropagation(); 
      }; 
 
document.body.onclick = function(event){
     alert("Body clicked"); 
     };

事件对象的 eventPhase 属性，可以用来确定事件当前正位于事件流的哪个阶段。如果是在捕获阶段调用的事件处理程序，那么 eventPhase 等于 1；如果事件处理程序处于目标对象上，则 event- Phase 等于 2；如果是在冒泡阶段调用的事件处理程序，eventPhase 等于 3。