阻止默认行为与事件传播：preventDefault() 与 stopPropagation()
欢迎来到前端讲座！
大家好，欢迎来到今天的前端讲座！今天我们要聊聊两个非常重要的 JavaScript 方法：preventDefault() 和 stopPropagation()。这两个方法在处理用户交互时非常有用，尤其是在你需要控制浏览器的默认行为或阻止事件在 DOM 树中传播的时候。
如果你曾经遇到过点击按钮后页面刷新、表单提交后页面跳转、或者点击某个元素时触发了你不想要的行为，那么这篇文章绝对适合你！我们将会通过轻松诙谐的方式，结合代码示例，帮助你理解这两个方法的工作原理，并教你如何在实际开发中使用它们。
什么是默认行为？
在浏览器中，某些元素有默认的行为。比如：
- 点击
<a>标签会跳转到指定的 URL。 - 点击
<button>标签会提交表单。 - 按下回车键时，表单也会被提交。
- 右键点击网页会弹出上下文菜单。
这些行为是浏览器为我们自动执行的，但有时候我们并不希望它们发生。这就是 preventDefault() 的用武之地。
preventDefault()：阻止默认行为
preventDefault() 是一个非常简单但强大的方法，它可以让浏览器停止执行默认行为。换句话说，你可以告诉浏览器：“嘿，我点击这个链接并不是真的想跳转到其他页面，我只是想做点别的事情。”
代码示例 1：阻止链接跳转
<a href="https://example.com" id="my-link">点击我</a>
<script>
document.getElementById('my-link').addEventListener('click', function(event) {
event.preventDefault(); // 阻止链接跳转
console.log('链接不会跳转，但我可以做其他事情！');
});
</script>在这个例子中，当用户点击链接时，浏览器不会跳转到 https://example.com，而是会在控制台输出一条消息。你可以在这里添加任何你想要的功能，比如打开一个模态框、发送 AJAX 请求等。
代码示例 2：阻止表单提交
<form id="my-form">
<input type="text" name="username" placeholder="输入用户名">
<button type="submit">提交</button>
</form>
<script>
document.getElementById('my-form').addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表单提交
console.log('表单不会提交，我可以先验证数据');
});
</script>在这个例子中，当用户点击“提交”按钮时，表单不会被提交，而是可以在 JavaScript 中进行数据验证或其他操作。
什么是事件传播？
事件传播是指当一个事件（如点击、键盘按键等）发生时，它不仅会影响触发该事件的元素，还会影响到它的父级元素，甚至整个文档。这种现象被称为“事件冒泡”。
举个例子，假设你有一个嵌套的 HTML 结构，当你点击最内层的元素时，实际上也会触发外层元素的事件监听器。这可能会导致意外的行为，尤其是当你不想让外层元素的事件被触发时。
事件传播的三个阶段
- 捕获阶段：事件从最外层的元素（通常是
document或window）开始向下传递，直到到达目标元素。 - 目标阶段：事件到达目标元素，触发该元素上的事件监听器。
- 冒泡阶段：事件从目标元素开始向上冒泡，依次触发父级元素的事件监听器，直到到达最外层的元素。
代码示例 3：事件冒泡
<div id="outer" style="padding: 20px; background-color: lightblue;">
外层 div
<div id="inner" style="padding: 20px; background-color: lightcoral;">
内层 div
</div>
</div>
<script>
document.getElementById('outer').addEventListener('click', function() {
console.log('外层 div 被点击了');
});
document.getElementById('inner').addEventListener('click', function() {
console.log('内层 div 被点击了');
});
</script>在这个例子中，当你点击内层 div 时，控制台会输出两条消息：
内层 div 被点击了
外层 div 被点击了这是因为点击事件不仅触发了内层 div 的事件监听器，还冒泡到了外层 div，触发了它的事件监听器。
stopPropagation()：阻止事件传播
如果你不希望事件冒泡到父级元素，可以使用 stopPropagation() 方法。它会告诉浏览器：“嘿，这个事件已经处理完了，不要再往上冒泡了。”
代码示例 4：阻止事件冒泡
<div id="outer" style="padding: 20px; background-color: lightblue;">
外层 div
<div id="inner" style="padding: 20px; background-color: lightcoral;">
内层 div
</div>
</div>
<script>
document.getElementById('outer').addEventListener('click', function() {
console.log('外层 div 被点击了');
});
document.getElementById('inner').addEventListener('click', function(event) {
event.stopPropagation(); // 阻止事件冒泡
console.log('内层 div 被点击了');
});
</script>现在，当你点击内层 div 时，控制台只会输出：
内层 div 被点击了外层 div 的事件监听器不会被触发，因为事件传播被阻止了。
stopImmediatePropagation()：更彻底的阻止
除了 stopPropagation()，还有一个更强大的方法叫做 stopImmediatePropagation()。它不仅会阻止事件冒泡，还会阻止同一事件类型的所有其他事件监听器被触发。也就是说，即使同一个元素上有多个事件监听器，stopImmediatePropagation() 也会立即停止所有后续的监听器。
代码示例 5：stopImmediatePropagation()
<div id="target" style="padding: 20px; background-color: lightgreen;">
点击我
</div>
<script>
document.getElementById('target').addEventListener('click', function(event) {
console.log('第一个事件监听器');
event.stopImmediatePropagation(); // 阻止其他监听器
});
document.getElementById('target').addEventListener('click', function() {
console.log('第二个事件监听器'); // 这个永远不会被执行
});
</script>在这个例子中，点击 div 时，只有第一个事件监听器会被触发，第二个监听器永远不会被执行。
preventDefault() 与 stopPropagation() 的区别
| 方法 | 功能 |
|---|---|
preventDefault() |
阻止浏览器的默认行为（如链接跳转、表单提交等），但事件仍然会继续传播。 |
stopPropagation() |
阻止事件传播（即事件不再冒泡到父级元素），但浏览器的默认行为仍然会发生。 |
stopImmediatePropagation() |
同时阻止事件传播和后续的事件监听器。 |
实际应用场景
- 阻止表单提交：当你需要在表单提交前进行验证时，可以使用
preventDefault()来阻止表单的默认提交行为。 - 阻止链接跳转：如果你使用
<a>标签作为按钮，但不想让它跳转到其他页面，可以使用preventDefault()。 - 阻止事件冒泡：当你点击一个子元素时，不希望触发父级元素的事件监听器，可以使用
stopPropagation()。 - 阻止键盘事件：例如，防止用户按下回车键时提交表单，可以使用
preventDefault()。
总结
今天我们一起学习了 preventDefault() 和 stopPropagation() 这两个非常有用的方法。它们可以帮助你在前端开发中更好地控制用户的交互行为，避免不必要的默认行为和事件传播。
记住，preventDefault() 是用来阻止浏览器的默认行为的，而 stopPropagation() 是用来阻止事件传播的。根据你的需求，选择合适的方法来优化用户体验。
如果你有任何问题或想法，欢迎在评论区留言！下次见，编码愉快！ 😊
