JavaScript事件对象详解：target与currentTarget区别、preventDefault与stopPropagation用法

事件对象概述

当DOM元素上的特定事件被触发时，系统会自动生成一个名为event的事件对象。

DOM中的事件对象机制

对于符合DOM标准的现代浏览器，事件处理函数接收一个event对象作为参数。该对象封装了与触发事件相关的所有属性和方法。尽管不同事件类型提供的具体成员有所差异，但所有事件对象均包含一组通用的基础成员。

根据2级DOM事件标准，以下是事件对象具备的标准属性列表：

bubbles：布尔值，用于判断该事件是否属于起泡事件类型。
cancelable：布尔值，指示该事件是否允许通过特定方法取消默认行为。
currentTarget：返回当前正在执行事件监听器的DOM元素。
eventPhase：整数，表示事件当前所处的传播阶段。
target：返回实际触发该事件的最底层DOM元素（即事件目标节点）。
timeStamp：返回事件发生时的时间戳，表示从页面加载开始到事件触发所经过的毫秒数。
type：字符串，返回当前Event对象所代表的事件类型名称。

此外，2级DOM事件标准还定义了一系列方法。需要注意的是，旧版IE的事件模型并不支持这些标准方法：

initEvent()：用于初始化新创建的Event对象的各项属性。
preventDefault()：通知浏览器取消事件的默认动作，即阻止浏览器执行与该事件关联的预设行为。
stopPropagation()：立即停止事件在DOM树中的进一步传播，既阻止捕获也阻止冒泡。

this、target与currentTarget的关系

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依然指向btn元素，因为它是click事件的真正发起者。由于btn本身未注册处理程序，click事件通过冒泡机制传递到了document.body，从而在那里得到处理。

事件对象的核心方法与应用

1、利用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;

2、使用preventDefault()阻止默认行为

若要阻止特定事件的浏览器默认行为，可调用该方法。示例如下：


var aTags = document.getElementsByTagName("a");
for (var i = 0; i < aTags.length; i++) {
  var currentATag = aTags[i];
  currentATag.onclick = function() {
    event.preventDefault();
  }
};

上述代码成功屏蔽了页面上所有a标签的默认跳转功能。需要特别注意，只有当事件的cancelable属性为true时，才能使用preventDefault()来取消默认行为。

3、使用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详解

4、理解eventPhase阶段判定

该属性用于标识事件当前正处于事件流中的哪个具体阶段。

若处于捕获阶段，其值为1；
若处于目标对象阶段，其值为2；
若处于冒泡阶段，其值为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 冒泡阶段

以上是对JavaScript事件对象的全面解析，希望能为您的学习提供有益参考。

深入解析JavaScript事件对象：属性、方法及传播机制

事件对象概述

this、target与currentTarget的关系

事件对象的核心方法与应用

事件传播阶段eventPhase详解

实用工具推荐