当前位置: 首页 > news >正文

DOM事件流+阻止冒泡事件+dom包含

DOM(文档对象模型)结构是一个树型结构,当一个HTML元素产生一个事件时,该事件会在元素节点与根结点之间的路径传播,路径所经过的结点都会收到该事件,这个传播过程可称为DOM事件流。DOM事件流最独特的性质是,文本节点也触发事件(在IE中不会),当鼠标单击“单击此文本”文本时会触发click事件,该事件的捕获阶段最先开始,从Document节点开始逐渐向下传播,直到“单击此文本”文本节点,事件进入目标阶段,在目标阶段结束之后,事件由“单击此文本”文本节点开始事件的冒泡阶段,直到Document节点为止。
简单来说事件流描述的就是页面中接受事件的顺序。

DOM事件流的三个阶段:
(1)事件捕获阶段:事件从Document节点自上而下向目标节点传播的阶段;
(2)事件目标阶段:真正的目标节点正在处理事件的阶段;
(3)事件冒泡阶段:事件从目标节点自下而上向Document节点传播的阶段。

事件冒泡是一个从子节点向祖先节点冒泡的过程;
事件捕获刚好相反,是从祖先节点到子节点的过程。

event.stopPropagation()方法阻止事件冒泡到父元素,阻止任何父事件处理程序被执行
event.preventDefault()方法取消事件的默认动作。该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作)。
例如:
form表单如果 type 属性是 “submit”,通过调用该方法,可以阻止提交表单。a元素中href连接,如果调用此方法是,连接不会被打开。
注意:
如果 Event 对象的 cancelable 属性是fasle,那么就没有默认动作,或者不能阻止默认动作。无论哪种情况,调用该方法都没有作用。
使用该方法还是会发生冒泡事件,冒泡会传递到上一层的父元素。

事件代理是利用事件冒泡行为,简单说就是:事件不直接绑定到某元素上,而是绑定到该元素的父元素上,如列表,再执行事件触发后的语句。 好处:(1)使代码更简洁;(2)节省内存开销

dom包含哪些?
1.元素节点
元素节点element对应网页的HTML标签元素。
2.属性 / 特性节点
元素特性节点attribute对应网页中HTML标签的属性。
3.文本节点
文本节点text代表网页中的HTML标签内容。
4.文档节点
文档节点document表示HTML文档,也称为根节点,指向document对象。

相关文章:

  • ZYNQ之GPIO机制
  • 第二章:Qt下载与安装 之 2.2 Qt安装
  • 一种基于堆的链式优先队列实现(使用golang)
  • 【笔记】文献阅读[YOLOV2]-YOLO9000: Better, Faster, Stronger
  • 【JVM基础】方法区
  • Delphi的函数指针传递和调用
  • Java实现简单图书操作系统思路讲解
  • SpringBoot MVC使用Gson,序列化LocalDate,LocalDateTime
  • 戴尔G3-3579改固态散热
  • C3P0和Druid数据库连接池的使用
  • 2022中国消费者智能网联汽车数据安全和个人隐私意识与顾虑调查报告
  • Java 大文件分片上传
  • Redis未授权访问漏洞
  • Java 修饰符 private、default、protected、public 的应用实例 (方法)
  • Java 多线程:锁(一)
  • 4. 路由到控制器 - Laravel从零开始教程
  • Android开发 - 掌握ConstraintLayout(四)创建基本约束
  • gulp 教程
  • Iterator 和 for...of 循环
  • Java 内存分配及垃圾回收机制初探
  • JavaScript类型识别
  • php ci框架整合银盛支付
  • uva 10370 Above Average
  • Yii源码解读-服务定位器(Service Locator)
  • 编写符合Python风格的对象
  • 开放才能进步!Angular和Wijmo一起走过的日子
  • 前端学习笔记之观察者模式
  • 如何抓住下一波零售风口?看RPA玩转零售自动化
  • 译米田引理
  • 原生 js 实现移动端 Touch 滑动反弹
  • 在weex里面使用chart图表
  • PostgreSQL 快速给指定表每个字段创建索引 - 1
  • 国内开源镜像站点
  • 智能情侣枕Pillow Talk,倾听彼此的心跳
  • !!Dom4j 学习笔记
  • ###STL(标准模板库)
  • #我与Java虚拟机的故事#连载15:完整阅读的第一本技术书籍
  • (C)一些题4
  • (done) 两个矩阵 “相似” 是什么意思?
  • (附源码)ssm旅游企业财务管理系统 毕业设计 102100
  • (蓝桥杯每日一题)love
  • (一)Spring Cloud 直击微服务作用、架构应用、hystrix降级
  • (转)GCC在C语言中内嵌汇编 asm __volatile__
  • (转)微软牛津计划介绍——屌爆了的自然数据处理解决方案(人脸/语音识别,计算机视觉与语言理解)...
  • *(长期更新)软考网络工程师学习笔记——Section 22 无线局域网
  • ./和../以及/和~之间的区别
  • .NET WebClient 类下载部分文件会错误?可能是解压缩的锅
  • .NET 应用启用与禁用自动生成绑定重定向 (bindingRedirect),解决不同版本 dll 的依赖问题
  • .Net 中Partitioner static与dynamic的性能对比
  • .Net程序猿乐Android发展---(10)框架布局FrameLayout
  • .NET简谈互操作(五:基础知识之Dynamic平台调用)
  • .net下简单快捷的数值高低位切换
  • .NET中使用Protobuffer 实现序列化和反序列化
  • .NET中统一的存储过程调用方法(收藏)
  • /run/containerd/containerd.sock connect: connection refused