一起来学习一下JavaScript的事件流

关于JavaScript事件流,我为大家准备了一份完整攻略,一起来学习一下。

什么是JavaScript事件流

JavaScript事件流是指浏览器中发生事件(如鼠标点击、键盘输入等)时,事件在DOM树结构中按照特定顺序发送和处理的过程。这个过程包含三个阶段:捕获阶段、目标阶段和冒泡阶段。

捕获阶段

在事件到达目标元素之前,从根节点到目标元素之间的所有节点都会接受到该事件的通知。这个过程叫做捕获阶段。

示例:

<html>
  <body>
    <div id="outer">
      <div id="inner"></div>
    </div>
  </body>
</html>

<script>
    var outer = document.getElementById('outer');
    var inner = document.getElementById('inner');
    outer.addEventListener('click', function(){
      console.log('outer capture');
    }, true);
    inner.addEventListener('click', function(){
      console.log('inner capture');
    }, true);
    outer.addEventListener('click', function(){
      console.log('outer bubble');
    }, false);
    inner.addEventListener('click', function(){
      console.log('inner bubble');
    }, false);
</script>

页面中有两个div元素,分别为外层div和内层div,外层div包含了内层div。通过JS代码给两个div元素绑定了两个click事件,分别在捕获阶段和冒泡阶段输出对应的信息。当我们在内层div上点击鼠标时,事件就会沿着根节点 -> 外层div -> 内层div的顺序进行捕获,最后到达目标元素内层div。在这个过程中,'outer capture'和'inner capture'两个信息会被输出。注意,代码中addEventListener第三个参数用来控制事件是否在捕获阶段执行,默认值是false,即事件在冒泡阶段执行。

目标阶段

目标阶段,即事件已经到达目标元素本身。如果该元素绑定了相应的事件处理函数,那么就开始执行该函数。如果在该元素上绑定了多个相同事件的处理函数,那么先绑定的会先执行。

示例:

<html>
  <body>
    <button id="button">Click me!</button>
  </body>
</html>

<script>
    var button = document.getElementById('button');
    button.addEventListener('click', function(){
      console.log('first click');
    });
    button.addEventListener('click', function(){
      console.log('second click');
    });
</script>

页面中有一个按钮,JS代码中给该按钮绑定了两个click事件处理函数,分别输出'first click'和'second click'。当我们点击按钮时,在目标阶段会输出这两个信息。

冒泡阶段

在冒泡阶段,事件开始从目标元素返回到根节点。在这个过程中,根据DOM结构,从目标元素到根节点的每个节点都将接收该事件通知。注意,HTML标签本身是节点,所以根节点到目标元素期间每个HTML标签都会接收到事件通知。

示例:

<html>
  <body>
    <div id="outer">
      <div id="inner"></div>
    </div>
  </body>
</html>

<script>
    var outer = document.getElementById('outer');
    var inner = document.getElementById('inner');
    outer.addEventListener('click', function(){
      console.log('outer bubble');
    }, false);
    inner.addEventListener('click', function(){
      console.log('inner bubble');
    }, false);
    outer.addEventListener('click', function(){
      console.log('outer capture');
    }, true);
    inner.addEventListener('click', function(){
      console.log('inner capture');
    }, true);
</script>

和第一个示例中相同的代码,只是事件处理函数的调用阶段改为冒泡阶段。这时,在内层div上点击鼠标时,事件会沿着内层div -> 外层div -> 根节点的顺序进行冒泡,最后输出'outer bubble'和'inner bubble'。

小结

本文简单介绍了JavaScript的事件流及其分为的三个阶段:捕获阶段、目标阶段和冒泡阶段。并给出了两个示例来说明上述三个阶段的执行顺序。通过学习事件流,可以更好地理解事件的原理和实现,并编写出更加高效的事件处理代码。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:一起来学习一下JavaScript的事件流 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • Javascript 获取字符串字节数的多种方法

    当需要统计字符串字节数时,Javascript提供了多种方法。以下是其中两种常见方法。 方法一:使用正则表达式 正则表达式可以帮助我们获取字符串中非ASCII字符的数量。假设我们要获取的字符串为”hello,世界”,该字符串长度为11,但其中含有一个ASCII字符和一个非ASCII字符(中文逗号“,”),因此其字节数为13。 下面是使用正则表达式实现获取字节…

    JavaScript 2023年5月19日
    00
  • 基于JavaScript 类的使用详解

    基于 JavaScript 类的使用详解 JavaScript 的 Class 定义是一种专门为对象的构建提供的语法糖。在ES6之前,JavaScript没有类(class)的概念,只能通过构造函数和原型对象来实现。 类的定义和语法 定义一个类可以使用 class 关键字,后面跟着类名和一对大括号 {}。 大括号内部可以定义类的属性和方法。使用 constr…

    JavaScript 2023年5月18日
    00
  • javascript学习笔记(三)显示当时时间的代码

    下面是关于“javascript学习笔记(三)显示当时时间的代码”的完整攻略。 前置知识 在学习本文之前,你需要掌握以下知识: HTML 基础 CSS 基础 Javascript 语法基础 确定功能 在开始编写代码之前,我们需要确定显示当前时间的具体功能。 我们要实现的功能是:在页面上显示当前的时间,并且能够实时更新。 编写代码 HTML结构 在HTML中,…

    JavaScript 2023年5月27日
    00
  • Javascript 小技巧全集第2/4页

    下面是关于Javascript 小技巧全集第2/4页的完整攻略: 简介 这篇文章主要介绍了一些Javascript的小技巧,包括如何在字符串和数字之间转换、如何快速判断变量是否为空、如何使用递归等。这些小技巧可以在开发过程中提高效率和减少错误。 字符串和数字之间的转换 在Javascript中,我们经常需要在字符串和数字之间进行转换。下面是一些常用的方法: …

    JavaScript 2023年5月18日
    00
  • sso跨域写cookie的一段js脚本(推荐)

    来详细讲解一下“sso跨域写cookie的一段js脚本(推荐)”的完整攻略。 什么是SSO? SSO(Single Sign-On,单点登录),指在多个应用系统中,用户只需登录一次就可以访问所有相互信任的应用系统。 什么是跨域? 跨域是指浏览器禁止通过客户端脚本语言发起对不同源(协议、域名、端口号)的请求。 为什么要跨域写Cookie? 由于浏览器的同源策略…

    JavaScript 2023年6月11日
    00
  • JS对象数组中如何匹配某个属性值

    针对这个问题,我们可以分为以下几个步骤进行说明: 定义一个JS对象数组; 遍历数组,检查所有对象是否包含指定的属性值; 如果找到指定的对象,就返回该对象;如果没有找到,就返回 undefined。 下面是具体的代码实现和示例: 定义 JS 对象数组 首先我们需要定义一个包含一组 JS 对象的数组,如下所示: let students = [ { id: 1,…

    JavaScript 2023年6月10日
    00
  • javascript实现的网站访问量统计代码

    下面是JavaScript实现网站访问量统计代码的完整攻略: 简介 网站访问量统计是网站开发中非常重要的一部分,可以让网站管理员了解网站的受欢迎程度和用户行为,帮助优化网站的内容和功能。JavaScript是前端开发的重要技术之一,可以使用JavaScript来实现网站访问量统计功能,下面是具体实现说明。 原理 JavaScript实现网站访问量统计分为两个…

    JavaScript 2023年6月11日
    00
  • javascript操作元素的常见方法小结

    下面就是”javascript操作元素的常见方法小结”的完整攻略: JavaScript操作元素的常见方法小结 在JavaScript中,我们经常需要通过某个元素的id/class名字获取到该元素,然后进行一些操作,比如修改其文本内容、改变其样式等等。那么,JavaScript中有哪些常见的操作元素的方法呢? 1. 通过id获取元素 在HTML中,每个元素都…

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