关键词

JavaScript事件冒泡与事件捕获

JavaScript事件冒泡与事件捕获是DOM的两种事件处理模型。事件处理模型规定了事件在DOM中的传播方式和触发顺序。

事件冒泡(Bubbling)

事件冒泡是DOM中事件的默认传播方式。子元素触发的事件会依次向父元素传递,直到传递到DOM树的根节点。

举个例子:

<div id="grandparent">
  <div id="parent">
    <div id="child"></div>
  </div>
</div>

<script>
  var grandparent = document.getElementById('grandparent');
  var parent = document.getElementById('parent');
  var child = document.getElementById('child');

  grandparent.addEventListener('click', function() {
    console.log('Grandparent clicked');
  });

  parent.addEventListener('click', function() {
    console.log('Parent clicked');
  });

  child.addEventListener('click', function() {
    console.log('Child clicked');
  });
</script>

假设我们点击 child 元素,事件将在 child 元素中被触发,然后向上传播到 parent 元素,接着传递到 grandparent 元素,最后到达 DOM 树的根节点。

事件捕获(Capturing)

事件捕获是另一种事件处理模型。与事件冒泡不同,事件捕获从DOM树的根节点开始触发,逐渐向下传递到具体的元素。

举个例子:

<div id="grandparent">
  <div id="parent">
    <div id="child"></div>
  </div>
</div>

<script>
  var grandparent = document.getElementById('grandparent');
  var parent = document.getElementById('parent');
  var child = document.getElementById('child');

  grandparent.addEventListener('click', function() {
    console.log('Grandparent clicked');
  }, true); // true 表示使用事件捕获模式

  parent.addEventListener('click', function() {
    console.log('Parent clicked');
  }, true);

  child.addEventListener('click', function() {
    console.log('Child clicked');
  }, true);
</script>

假设我们点击 child 元素,事件会从 DOM 树的根节点开始传播,依次传递到 grandparent 元素、parent 元素和 child 元素。

事件捕获与事件冒泡的结合使用

事件捕获和事件冒泡是可以同时存在的,但是他们执行的顺序是相反的。

举个例子:

<div id="grandparent">
  <div id="parent">
    <div id="child"></div>
  </div>
</div>

<script>
  var grandparent = document.getElementById('grandparent');
  var parent = document.getElementById('parent');
  var child = document.getElementById('child');

  grandparent.addEventListener('click', function() {
    console.log('Grandparent clicked in capture phase');
  }, true);

  parent.addEventListener('click', function() {
    console.log('Parent clicked in capture phase');
  }, true);

  child.addEventListener('click', function() {
    console.log('Child clicked in capture phase');
  }, true);

  grandparent.addEventListener('click', function() {
    console.log('Grandparent clicked in bubble phase');
  });

  parent.addEventListener('click', function() {
    console.log('Parent clicked in bubble phase');
  });

  child.addEventListener('click', function() {
    console.log('Child clicked in bubble phase');
  });
</script>

点击 child 元素后,事件会先在捕获阶段,从DOM树的根节点一直往下传递到 child 元素,并依次触发 grandparent、parent、child 元素的捕获事件。

接着,事件进入冒泡阶段,从 child 元素开始向上冒泡,依次触发 child、parent、grandparent 元素的冒泡事件。

总的来说,事件捕获和事件冒泡为开发者提供了丰富的事件处理方式,可以通过选择合适的方式来监听并处理事件,为页面交互提供更多效果。

本文链接:http://task.lmcjl.com/news/4031.html

展开阅读全文