码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • 事 件 流


    • 在JavaScript中,事件流指的是DOM事件流。
    • 当一个事件发生时,不仅产生事件的元素响应,其他的元素也会响应。
    • 由于DOM模型是一个树状结构,其中的HTML元素上产生一个事件时,该事件会在DOM树中元素节点和根节点之间按照特定的顺序传播,路径所经过的节点都会收到该事件,这个过程就是DOM的事件流。
    • 按照传播方向的不同,DOM事件流有两种方式:冒泡事件和捕获事件

     冒泡事件

    • 在JavaScript中,默认使用冒泡事件。
    • 当事件在某一元素上触发时,事件将沿着整个节点的父节点自下而上穿过多个DOM节点,就像冒泡一样,所以这种方式称为冒泡事件。
    • 在冒泡的过程中,在任何时候都可以终止事件的冒泡。如果不终止冒泡,事件流会沿着DOM节点一直向上直至DOM的根节点。
    • 例如:给
      绑定一个单击事件,给
      里的也绑定一个单击事件,给
      外的也绑定一个单击事件,当的单击事件触发时,事件会从流向
      ,然后流向,
      和的单击事件也会被触发
    • 所谓的冒泡事件就是事件向上传导,当后代元素上的事件被触发时,其祖先元素的相同事件也会被触发
    • 在开发中大部分情况冒泡都是有用的,如果不希望发生冒泡事件,可以通过事件对象来取消冒泡事件(将事件对象的属性cancelBubble设置为true,即可取消冒泡)

    捕获事件 

    • 与冒泡事件相反,在捕获事件中,事件的传播将从DOM树的根节点开始,而不是从触发事件的目标元素开始。
    • 事件是从目标元素的所有祖先元素依次向下传递。
    • 在这个过程中事件会从DOM树的根元素到事件目标元素之间各个继承之间的元素所捕获。
    • 如果希望在捕获阶段就触发事件,可以将addEventListener()的第三个参数设置为true。
    • 一般情况下不会希望在捕获阶段触发事件,所以这个参数一般都是false

    事件传导的三个阶段 

    • 关于事件的传导网景公司和微软公司有不同的理解
    • 微软公司认为事件应该是由内向外传播,也就是当事件触发时,应该先触发当前元素上的事件,然后再向当前元素的祖先元素上传导,也就是说事件应该在冒泡阶段执行
    • 网景公司认为事件应该是由外向内传导的,也就是当前事件触发时,应该先触发当前元素的最外层的祖先元素的事件,然后再向内传播给后代
    • W3C综合了两个公司的方案,将事件传播分成了三个阶段

    1.捕捉阶段

    事件将沿着DOM树向下传递,经过目标节点的每一个祖先节点,直到目标节点。例如:用户单击了一个超链接,则该单击事件将从document节点转送到HTML元素、body元素以及包含超链接的div元素。就是目标节点。IE8及以下的浏览器没有捕获阶段 

    2.目标阶段

    在次阶段中,事件传导到目标节点。浏览器在查找到已经指定给目标事件的事件监听器之后,就会运行该事件监听器

    3.冒泡阶段

    事件将沿着DOM树向上传递,再逐次访问目标元素的祖先节点直到documentj节点。该过程的每一步,浏览器都会执行那些不是捕捉事件监听器的事件监听器(EventListener)

  • 相关阅读:
    个人博客系统的总结
    车载氧吧E-mark认证流程是怎样的?
    原码反码补码移码的介绍和计算
    Android 14适配记录
    Vue3动态路由(Vite+Vue3+TS+Mock)
    Golang源码:singleflight分析(二)
    如何进行接口测试?
    面对工作中的失误:从错误中学习与成长
    Android studio2022.3项目中,底部导航菜单数多于3个时,只有当前菜单显示文本,其他非选中菜单不显示文本
    鸢尾花数据可视化
  • 原文地址:https://blog.csdn.net/qq_51088023/article/details/125906486
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号