JavaScript 事件是前端开发中重要的一环。理解 JavaScript 事件模型以及如何处理它们，是成为一个优秀前端开发人员必不可少的技能。本文将详细介绍 JS 事件相关的概念和知识点，并提供实例代码帮助读者更好地理解。
事件传播
当用户与网页交互时，会产生各种事件，如鼠标点击事件，键盘按下事件等。在 JavaScript 中，这些事件会一路向上冒泡到 DOM 树根节点，或者从根节点往下进行捕获。这种行为被称为事件传播（Event Propagation）。
冒泡
在事件冒泡阶段中，事件从最内层的 DOM 元素开始向外传递，直到到达包含元素（一般是 document 对象）。在这个过程中，父元素的监听器会在其自身之前先接收到事件。例如：
<body>
<div id="box">
<button id="btn">Click me</button>
</div>
</body>如果我们给 box 和 body 标签都添加了 click 事件监听器，当用户点击 button 按钮时，事件首先会被 box 元素接收到，然后是 body 元素。
-- -------------------- ---- ------- --- --- - ------------------------------- --- ---- - ----------------------------------------- ----------------------------- ---------- - -------------------- ------ --- ------------------------------ ---------- - -------------------- ------- ---
输出结果：
Clicked box Clicked body
捕获
在事件捕获阶段中，与冒泡相反，事件从最外层的元素开始向内传递，直到到达目标元素。在这个过程中，父元素的监听器会在其孩子之前先接收到事件。例如：
<body>
<div id="box">
<button id="btn">Click me</button>
</div>
</body>如果我们给 box 和 body 标签都添加了 click 事件监听器，并设置了 capture 为 true，当用户点击 button 按钮时，事件首先会被 body 元素接收到，然后是 box 元素。
-- -------------------- ---- ------- --- --- - ------------------------------- --- ---- - ----------------------------------------- ------------------------------ ---------- - -------------------- ------- -- ------ ----------------------------- ---------- - -------------------- ------ -- ------
输出结果：
Clicked body Clicked box
事件处理程序
在 JavaScript 中，可以通过事件处理程序（Event Handlers）来响应特定的事件。事件处理程序可以被添加到任何 DOM 元素上，它们通常是一个 JavaScript 函数，用来处理指定事件的逻辑。例如：
<button id="btn">Click me</button>
var btn = document.getElementById('btn');
btn.onclick = function() {
alert('Button clicked');
};在这个例子中，我们给按钮添加了一个点击事件处理程序，当用户点击该按钮时，alert 弹窗会显示 "Button clicked"。
需要注意的是，使用 onclick 这种方式添加事件处理程序存在一些问题，比如无法同时添加多个事件处理程序，也无法移除指定事件处理程序。推荐使用 addEventListener() 方法来添加事件处理程序。
事件对象
当某个事件发生时，JavaScript 会自动生成一个事件对象（Event Object），其中包含有关该事件的详细信息。事件对象可以用来获取事件类型、目标元素等信息。例如：
<button id="btn">Click me</button>
var btn = document.getElementById('btn');
btn.addEventListener('click
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/14462) ，转载请注明来源
[https://www.javascriptcn.com/post/14462](https://www.javascriptcn.com/post/14462)