浏览器事件机制
Date:
浏览器事件机制分为捕获、目标和冒泡三个阶段…
目录
浏览器的事件机制概述
浏览器的事件机制是网页与用户交互的核心。当用户在网页上进行操作（如点击、滚动、输入）或浏览器自身状态发生变化时（如页面加载完成、窗口大小改变），浏览器会触发相应的事件（Event）。 JavaScript 代码通过事件监听器（Event Listener）来“监听”这些事件，并在事件发生时执行特定的事件处理函数（Event Handler）。
整个事件机制的核心过程可以分为以下几个关键阶段：
- 事件发生与触发 (Event Firing)
- 事件传播 (Event Propagation)：包括捕获阶段、目标阶段、冒泡阶段
- 事件对象 (Event Object)
- 事件流的取消与阻止 (Event Cancellation)
1. 事件发生与触发 (Event Firing)
当用户与网页交互（如鼠标点击、键盘按下、表单提交）或浏览器内部状态改变时，浏览器会检测到这些行为，并创建一个事件对象。这个事件对象包含了所有关于该事件的详细信息。
2. 事件传播 (Event Propagation)
事件传播是事件从 DOM 树的根节点开始，或从事件发生的实际元素开始，沿着 DOM 树传递到其他节点的过程。它分为三个阶段：
a) 捕获阶段 (Capturing Phase)
- 方向： 从 DOM 树的根节点（
window->document->body）开始，向下逐级传播，直到事件的目标元素（即用户实际操作的那个元素）的父级。 - 目的： 允许在事件到达目标元素之前，由其祖先元素拦截并处理事件。
- 特点： 现代浏览器默认情况下，
addEventListener的第三个参数（或options对象的capture属性）为false，即默认不监听捕获阶段的事件。如果设为true，则会在捕获阶段触发。
b) 目标阶段 (Target Phase)
- 方向： 事件到达它最初被触发的目标元素。
- 特点： 在这个阶段，事件会在目标元素上触发。这是事件传播的中心点。
c) 冒泡阶段 (Bubbling Phase)
- 方向： 从目标元素开始，向上逐级传播，直到 DOM 树的根节点（
body->document->window）。 - 目的： 允许事件的父级元素、祖先元素，甚至更上层的元素处理发生在子元素上的事件。这是事件委托（Event Delegation）的基础。
- 特点： 绝大多数事件都会经历冒泡阶段。
addEventListener默认监听的就是冒泡阶段的事件。
3. 事件对象 (Event Object)
当事件发生时，浏览器会自动创建一个事件对象，并将其作为参数传递给事件处理函数。这个对象包含了关于事件的所有上下文信息，例如：
event.type： 事件的类型（如'click'、'mouseover'、'keydown'）。event.target： 实际触发事件的元素（即 DOM 树中最深层的元素）。event.currentTarget： 当前正在处理事件的元素（即事件监听器所绑定到的那个元素）。在冒泡或捕获阶段，target和currentTarget可能不同。event.preventDefault()： 阻止事件的默认行为（如阻止表单提交、阻止链接跳转）。event.stopPropagation()： 阻止事件在 DOM 树中进一步传播（无论是捕获还是冒泡）。event.stopImmediatePropagation()： 阻止事件在 DOM 树中进一步传播，同时阻止同一元素上的其他事件监听器被调用。event.bubbles： 布尔值，表示事件是否会冒泡。event.cancelable： 布尔值，表示事件的默认行为是否可以被取消。- 鼠标事件特有：
event.clientX,event.clientY(鼠标相对于视口的坐标)。 - 键盘事件特有：
event.key,event.keyCode(按下的键)。
4. 事件流的取消与阻止 (Event Cancellation)
event.preventDefault()：- 作用： 取消事件的默认行为。
- 示例：
- 阻止表单提交 (
<form>) 的默认页面跳转。 - 阻止链接 (
<a>) 的默认页面跳转。 - 阻止右键菜单 (
contextmenu) 的显示。
- 阻止表单提交 (
- 注意： 只有当事件对象的
cancelable属性为true时，preventDefault()才有效。
event.stopPropagation()：- 作用： 阻止事件在DOM 树中的进一步传播（无论是在捕获阶段还是冒泡阶段）。
- 示例： 你有一个内嵌的按钮，点击按钮时你只想触发按钮自身的点击事件，不希望其父元素也触发。
- 注意： 它只会阻止事件继续向上或向下传播，但当前元素上其他同类型的事件监听器仍然会被触发。
event.stopImmediatePropagation()：- 作用： 阻止事件在 DOM 树中进一步传播，并且还会阻止当前元素上所有其他相同类型的事件监听器被调用。
- 场景： 当一个元素上有多个相同类型的事件监听器，并且你希望其中一个监听器执行后，就立即停止所有后续的同类型监听器以及事件传播时使用。
事件监听
a) HTML 事件属性 (不推荐)
直接在 HTML 标签上添加事件属性。
缺点： 混合了 HTML 和 JavaScript，不利于代码分离和维护。
<button onclick="alert('Hello!')">点击我</button>
b) DOM 元素的 onXXX 属性赋值 (不推荐多事件绑定)
将事件处理函数直接赋值给 DOM 元素的属性。
缺点： 只能为一个事件类型绑定一个处理函数，后绑定的会覆盖先绑定的。
const btn = document.getElementById('myButton'); btn.onclick = function() { console.log('按钮被点击了！'); }; btn.onclick = function() { // 这会覆盖上面的处理函数 console.log('这是第二个点击事件！'); };
c) DOM元素的 EventTarget.addEventListener (推荐)
这是现代 JavaScript 中最推荐和常用的方式。
优点：
- 可以为同一个事件类型绑定多个处理函数。
- 可以控制在捕获阶段或冒泡阶段监听事件。
- 可以将事件监听器从元素上移除 (
removeEventListener)。
const btn = document.getElementById('myButton'); // 监听冒泡阶段的点击事件 (默认) btn.addEventListener('click', function(event) { console.log('按钮冒泡点击：', event.target.id); }); // 监听捕获阶段的点击事件 document.getElementById('container').addEventListener('click', function(event) { console.log('容器捕获点击：', event.currentTarget.id); }, true); // 第三个参数设为 true 表示在捕获阶段触发 // 移除事件监听器 (需要引用同一个函数实例) function handleClick() { console.log('我将被移除'); } btn.addEventListener('click', handleClick); btn.removeEventListener('click', handleClick);
事件委托 (Event Delegation)
事件委托是利用事件冒泡机制的一种优化技术。
原理： 不为每个子元素单独绑定事件监听器，而是将监听器绑定到它们的共同父元素上。当子元素上的事件冒泡到父元素时，通过检查
event.target来确定是哪个子元素触发了事件，然后执行相应的处理逻辑。优点：
- 性能优化： 减少了事件监听器的数量，尤其对于大量动态生成的列表项非常有效。
- 内存占用少： 减少了内存中事件处理函数的数量。
- 动态元素支持： 自动支持未来动态添加的子元素，无需重新绑定事件。
示例：
<ul id="myList"> <li id="item1">Item 1</li> <li id="item2">Item 2</li> <li id="item3">Item 3</li> </ul>const list = document.getElementById('myList'); list.addEventListener('click', function(event) { // 检查 event.target 是否是 li 元素 if (event.target.tagName === 'LI') { console.log('点击了列表项:', event.target.id); // 根据 event.target 执行不同的逻辑 } });