×

JavaScript每日一学:事件冒泡和事件捕获

作者:Terry2023.08.21来源:Web前端之家浏览:4554评论:0
关键词: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>

假设我们点击子元素,事件将从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 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');
  });

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/JavaScript1692539244.html

网友评论文明上网理性发言 已有0人参与

发表评论: