什么是事件冒泡？如何阻止事件冒泡和浏览器默认事件？

事件冒泡是浏览器事件处理模型中的一个重要概念。当一个事件发生在某个元素上时，它会首先在该元素上触发，然后逐层向上冒泡到其父元素，直到根元素（通常是 document）为止。这意味着如果在一个嵌套的元素上触发了事件，父元素也会接收到该事件。

事件冒泡的过程假设有以下 HTML 结构：

如果点击了按钮 #child，事件的处理顺序是：

child 的事件处理函数执行。

parent 的事件处理函数执行。

document 的事件处理函数执行。

如何阻止事件冒泡要阻止事件冒泡，可以使用 event.stopPropagation() 方法。它会阻止事件继续向上冒泡到父元素。

示例:

document.getElementById("parent").addEventListener("click", () => {

console.log("Parent clicked");

});

document.getElementById("child").addEventListener("click", (event) => {

console.log("Child clicked");

event.stopPropagation(); // 阻止事件冒泡

});

在这个示例中，点击按钮 #child 时，只会输出 "Child clicked"，而不会输出 "Parent clicked"。

阻止浏览器默认事件除了事件冒泡，有时我们还需要阻止浏览器的默认行为，比如点击链接时跳转、提交表单等。可以使用 event.preventDefault() 方法。

示例:

document.getElementById("link").addEventListener("click", (event) => {

event.preventDefault(); // 阻止默认行为

console.log("Link clicked, but no navigation");

});

在这个示例中，点击链接时不会跳转，而是只输出 "Link clicked, but no navigation"。

同时阻止事件冒泡和默认行为可以同时调用 stopPropagation() 和 preventDefault() 来阻止事件的冒泡和默认行为。

示例:```document.getElementById("form").addEventListener("submit", (event) => {

event.preventDefault(); // 阻止表单提交 event.stopPropagation(); // 阻止事件冒泡 console.log("Form submitted but prevented");});

```总结事件冒泡：事件从子元素向父元素传播的过程。阻止事件冒泡：使用 event.stopPropagation()。阻止默认事件：使用 event.preventDefault()。同时阻止：可以同时调用 stopPropagation() 和 preventDefault() 来达到两个目的。这些技术在处理复杂的用户交互时非常有用，可以帮助管理事件的行为和控制应用程序的逻辑。