JavaScript 事件传递198

简介

JavaScript 事件传递是指当用户与网页交互时，事件如何在 DOM 树中传播的过程。它允许我们创建对用户输入做出响应的动态和交互式的网页。

事件冒泡

事件冒泡是一种事件传递模型，其中事件从触发元素开始向文档树的根元素逐级传播。当元素收到事件时，它会先触发自己绑定的事件处理程序，然后再将事件传递给其父元素。这个过程持续进行，直到事件达到文档的根元素。

点击

const button = ('button');
const container = ('container');
// 在按钮上绑定一个点击事件处理程序
('click', () => {
('按钮被点击了');
});
// 在容器上绑定一个点击事件处理程序
('click', () => {
('容器被点击了');
});

上面的代码展示了事件冒泡。当按钮被点击时，它会触发自己绑定的事件处理程序，然后将事件传递给容器元素，而容器元素会触发自己的事件处理程序。因此，控制台将打印两次消息，一次是按钮被点击的，一次是容器被点击的。

事件捕获

事件捕获是一种事件传递模型，其中事件从文档的根元素开始向触发元素逐级向下传播。当元素收到事件时，它会先触发其父元素绑定的事件处理程序，然后再触发自己绑定的事件处理程序。这个过程持续进行，直到事件到达触发元素。

点击

const button = ('button');
const container = ('container');
// 在容器上绑定一个点击事件处理程序，采用事件捕获
('click', () => {
('容器被点击了');
}, true);
// 在按钮上绑定一个点击事件处理程序
('click', () => {
('按钮被点击了');
});

上面的代码展示了事件捕获。当按钮被点击时，它会先触发容器元素绑定的事件处理程序，然后触发自己绑定的事件处理程序。因此，控制台将打印两次消息，一次是容器被点击的，一次是按钮被点击的。

事件委派

事件委派是一种事件处理技术，它可以将多个元素的事件处理程序委托给一个公共的父元素。这可以提高性能，因为只需要为一个元素绑定事件处理程序，而不是为每个元素都绑定事件处理程序。

点击
点击

const container = ('container');
// 在容器上绑定一个点击事件处理程序，使用事件委派
('click', (e) => {
if ( === 'button1') {
('按钮 1 被点击了');
} else if ( === 'button2') {
('按钮 2 被点击了');
}
});

上面的代码展示了事件委派。当任何按钮被点击时，它都会触发容器元素绑定的事件处理程序。然后，事件处理程序检查点击的元素的 ID，并据此执行相应的操作。因此，控制台将打印消息，指示哪个按钮被点击了。

JavaScript 事件传递是一种强大的机制，它允许我们对用户的交互做出响应并创建动态的网页。通过理解事件冒泡、事件捕获和事件委派，我们可以有效地处理事件并开发用户友好的应用程序。

2025-02-13

上一篇：如何优雅地输出 JavaScript 对象

下一篇：javascript 等待几秒（详细指南）