从根本理解 event.stopPropagation() 和 event.preventDefault()

前端

2023-10-21 20:56:23

什么是事件冒泡

在网页中，当一个元素发生事件时，这个事件会从该元素开始向其父元素逐层冒泡。这个过程称为事件冒泡。例如，当我们在一个按钮上点击时，这个点击事件会从按钮开始，然后冒泡到按钮的父元素、祖父元素，直到最终到达文档的根元素。

什么是事件捕获

事件捕获与事件冒泡相反，它是从文档的根元素开始，然后逐层向下捕获到目标元素。事件捕获可以阻止事件冒泡，并且可以用来捕获那些在目标元素上无法捕获的事件。

event.stopPropagation() 的用法

event.stopPropagation() 方法可以阻止事件的冒泡。这意味着，当一个事件发生时，它不会再继续向其父元素冒泡。

语法：

event.stopPropagation();

例如：

<button id="btn">按钮</button>

<script>
  const btn = document.getElementById('btn');

  btn.addEventListener('click', (event) => {
    // 阻止事件冒泡
    event.stopPropagation();

    console.log('按钮被点击了');
  });
</script>

在上面的代码中，当按钮被点击时，"按钮被点击了"这条信息会输出到控制台，但是事件不会再继续冒泡到按钮的父元素。

event.preventDefault() 的用法

event.preventDefault() 方法可以阻止事件的默认行为。这意味着，当一个事件发生时，它不会触发默认的行为。

语法：

event.preventDefault();

例如：

<form id="form">
  <input type="submit" value="提交">
</form>

<script>
  const form = document.getElementById('form');

  form.addEventListener('submit', (event) => {
    // 阻止表单提交的默认行为
    event.preventDefault();

    console.log('表单被提交了');
  });
</script>

在上面的代码中，当表单被提交时，"表单被提交了"这条信息会输出到控制台，但是表单不会被提交。

event.stopPropagation() 和 event.preventDefault() 的区别

event.stopPropagation() 阻止事件的冒泡，而 event.preventDefault() 阻止事件的默认行为。
event.stopPropagation() 可以用来阻止事件冒泡到其父元素，而 event.preventDefault() 可以用来阻止事件触发默认的行为。