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 元素的冒泡事件。

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

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript事件冒泡与事件捕获 - Python技术站

(0)
上一篇 2023年3月30日
下一篇 2024年10月28日

相关文章

  • HTML5+setCutomValidity()函数验证表单实例分享

    HTML5+setCustomValidity()函数是HTML5表单验证的一种手段,可以用于实现自定义的表单验证。它可以在用户提交表单之前,动态地对表单中的输入进行检验,通过返回值控制表单是否能够提交。以下是使用HTML5+setCustomValidity()函数进行表单验证的完整攻略。 1. 创建一个基本表单 首先,在HTML中创建一个表单,并添加一些…

    JavaScript 2023年6月10日
    00
  • JS散列表碰撞处理、开链法、HashTable散列示例

    JS散列表碰撞处理是指在散列表中插入元素时,如果发现插入位置已经有元素,就会出现碰撞的情况。碰撞处理的目标是保持散列表中没有重复的元素。下面将介绍两种JS散列表的碰撞处理方法:开链法和线性探测法。 开链法 开链法也被称为拉链法,是一种常用的碰撞处理技术。它的基本思想是将每个散列值的链表放置在散列表的对应位置上,如果插入时与该链表中的某个元素发生碰撞,就将新元…

    JavaScript 2023年5月28日
    00
  • 6种javascript显示当前系统时间代码

    以下是关于“6种JavaScript显示当前系统时间代码”的详细攻略。 概述 在网页中显示当前系统时间是一项常见的需求,JavaScript提供了多种方法来实现这个目标。本文将介绍6种不同的实现方法,并提供示例代码。 方法1: JavaScript Date对象 JavaScript Date对象是处理日期和时间的常用对象,可以获取当前日期和时间。下面是获取…

    JavaScript 2023年5月27日
    00
  • vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)

    vue中v-cloak是一个Vue内置的指令,它可以在Vue实例渲染后,将标签中的v-cloak属性移除,以实现解决刷新或者加载出现闪烁问题,保证在Vue实例渲染之前不会显示出来。下面就来详细讲解一下v-cloak的使用方法。 一、v-cloak的基本使用 直接上代码: <!–模板代码–> <div v-cloak> <!-…

    css 2023年6月10日
    00
  • 实例解析Array和String方法

    实例解析Array和String方法 在 JavaScript 开发中,使用 Array 和 String 是非常常见的。为了更好的掌握这两个数据类型,了解其方法使用是非常必要的。本文将会讲解 Array 和 String 常用的方法以及使用示例。 Array方法 push 语法:arrayObject.push(newelement1,newelement…

    JavaScript 2023年6月10日
    00
  • 一个简单的JS时间控件示例代码(JS时分秒时间控件)

    下面是关于“一个简单的JS时间控件示例代码(JS时分秒时间控件)”的完整攻略。 1.概述 一个简单的JS时间控件,常见于某些表单页面,提供给用户选择时间的功能。这个示例的特点在于,它只显示时分秒,并按照24小时制呈现。 2.示例说明 下面以两个示例说明这个JS时间控件的用法。 2.1 示例1:基本用法 代码如下: <!DOCTYPE html> …

    JavaScript 2023年5月27日
    00
  • css3+贝塞尔曲线实现可伸缩input搜索框效果

    让我来详细介绍一下“CSS3+贝塞尔曲线实现可伸缩input搜索框效果”的完整攻略。 1. 贝塞尔曲线 在介绍实现搜索框效果之前,我们先来了解一下贝塞尔曲线。 贝塞尔曲线是计算机图形学中广泛使用的一种数学工具,可以通过控制点和曲线的阶数来生成平滑的曲线。 在实现搜索框效果时,我们可以使用贝塞尔曲线来实现输入框的可伸缩效果。 2. 实现搜索框效果 实现搜索框伸…

    css 2023年6月10日
    00
  • css固定表头、行头样式代码

    要实现CSS固定表头、行头样式,一般采用CSS中的position属性。下面是完整攻略: 样式代码 table { width: 100%; border-collapse: collapse; border-spacing: 0; } thead, tbody, tr, td, th { display: block; } tr:after { conte…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部