JavaScript事件对象兼容性与事件委托机制详解

作者：小圆点

时间：2026-10-22

本文介绍IE9以下浏览器中事件对象挂载于window.event的兼容性问题，提供event || window.event的标准解决方案。重点解析事件委托原理，即通过父级绑定事件并利用event.target定位子元素，结合示例代码说明如何实现对子级对象的动态控制。

文章目录

事件对象兼容性问题

在IE9之前的旧版浏览器中，事件对象并未作为参数传递给事件处理函数，而是被挂载在全局window对象上，即通过window.event访问。

为确保代码在不同浏览器中的兼容性，标准做法是使用逻辑或运算符进行赋值：event = event || window.event，从而统一获取事件对象。

事件委托机制与target应用

事件委托是一种将事件监听器绑定在父级或更高层级的祖先元素上，并通过检查事件对象的target属性来判断具体触发元素，进而对子级元素进行操作的机制。

event.target属性用于获取当前点击或触发事件的具体DOM元素，即实际的目标对象，这是实现事件委托的核心依据。


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    td{
      width: 100px;
      height: 100px;
      border:2px solid red;
    }
  </style>
</head>
<body>
<table >
  <tr>
    <td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td>
  </tr>
</table>
</body>
<script>
  var tab = document.getElementsByTagName("table")[0];
  tab.onclick = function (event) {
    //点击子级对象改变颜色
    event.target.style.backgroundColor = "black";
  }
</script>
</html>

若内容存在不足，欢迎指正；希望上述内容能为您提供帮助。

总结

感谢阅读，希望本文对您的学习或工作有所帮助。如需了解更多相关信息，请查阅相关链接。