stopPropagation()和preventDefault()这两个方法有什么区别？

stopPropagation() 和 preventDefault() 是 JavaScript 中用于事件处理的两个重要方法，它们的主要区别在于它们针对事件的不同方面：

• stopPropagation() 阻止事件冒泡: 当一个元素上的事件被触发时，例如点击一个按钮，该事件会沿着 DOM 树向上冒泡，触发其父元素、祖先元素上的相同事件，直到到达文档根节点。stopPropagation() 方法阻止了这种冒泡行为，使得事件只在当前元素上触发，而不会继续传递到其祖先元素。

• preventDefault() 阻止默认行为: 很多 HTML 元素都有一些默认行为，例如点击链接会跳转到新的页面，提交表单会刷新页面，点击表单的提交按钮也会提交表单。preventDefault() 方法阻止了这些默认行为的发生。

举例说明:

假设你有一个嵌套的结构：

<div id="outer">
  <button id="inner">Click Me</button>
</div>

并且你为 outer 和 inner 元素都绑定了点击事件：

document.getElementById('outer').addEventListener('click', function(event) {
  console.log('Outer clicked');
});

document.getElementById('inner').addEventListener('click', function(event) {
  console.log('Inner clicked');
  // event.stopPropagation(); // 如果取消注释，则阻止冒泡
  // event.preventDefault(); // 如果取消注释，则阻止默认行为 (如果适用)
});

1. 不使用 stopPropagation() 和 preventDefault(): 当你点击内部的按钮时，控制台会输出：

   Inner clicked
   Outer clicked
   

   这是因为事件从 inner 冒泡到了 outer。

2. 使用 stopPropagation(): 如果在 inner 的事件处理函数中添加 event.stopPropagation();，当你点击内部按钮时，控制台只会输出：

   Inner clicked
   

   因为事件冒泡被阻止了。

3. 使用 preventDefault() (假设 inner 是一个 submit 按钮 within a form): 如果 inner 是一个提交按钮，点击它会提交表单并刷新页面。如果在 inner 的事件处理函数中添加 event.preventDefault();，点击按钮后将不会提交表单或刷新页面，但事件仍然会冒泡到 outer，控制台会输出：

   Inner clicked
   Outer clicked
   

总结:

这两个方法可以根据需要单独使用，也可以结合使用。 理解它们的区别对于编写高效和可控的前端交互至关重要。