1. 事件

两种类型的事件:触发式、冒泡式

2. 冒泡式

触发式:事件从DOM结构的顶层往下走的事件触发过程;

冒泡式:事件从DOM结构的底层往上走的事件触发过程。

3. 父子节点

当父、子节点同时对一个事件进行监听的时候,冒泡式的事件方式中,发生在子节点中的事件,在完成子节点事件处理函数后,将继续执行父节点注册的事件处理函数。

  • 父、子节点都对某事件进行了监听,比如:父节点监听了onclick,子节点也监听了onclick事件
  • 发生在子节点上的事件,子节点事件处理函数将优先被调用
  • 如果只发生在父节点上,则与子节点没有关系
  • 子节点上的事件执行完成之后,父节点事件处理函数接下来被调用

4. 取消事件传递

在子节点事件处理函数中,通过调用事件处理函数参数:event.stopPropagation()函数,来阻止事件的冒泡行为。

  • 事件处理函数,接收一个参数,即event事件对象,event = event || window.event,然后调用event.stopPropagation()。

5. 使用场景

蒙版div作为父元素,蒙版div的子元素作为内容的呈现区域,当点击内容呈现区域之外时,能够关闭蒙版,但是点击内容程序区域则不会触发蒙版的关闭,此时通过在内容程序区域(子div节点)给Onclick事件处理函数中,使用event.stopPropagation()函数来阻止:点击此内容呈现区域导致的蒙版关闭行为。

最新文章

  1. postman插件安装教程
  2. css绘制三角形原理
  3. UART IP和UVM的验证平台
  4. C++标准库string类型
  5. Android 设计中的.9.png
  6. WPF 类型“System.ComponentModel.ISupportInitialize”在未被引用的程序集中定义。
  7. spring <context:component-scan>(转)
  8. Mysql在php5中的应用
  9. 基于Visual C++2013拆解世界五百强面试题--题10-找出N个数种最大的K个数
  10. Linux学习 -- Shell基础 -- 概述
  11. 新概念英语(1-41)Penny's bag
  12. margin合并和浮动
  13. 使用有序GUID:提升其在各数据库中作为主键时的性能
  14. SSH的三种端口转发
  15. bzoj 1002 [FJOI2007]轮状病毒——打表找规律
  16. 【LG2257】YY的GCD
  17. 【目标检测】Cascade R-CNN 论文解析
  18. 在小程序开发中使用 npm
  19. 【转载】ORA-12519: TNS:no appropriate service handler found 解决
  20. PJISP 修改 消息头Fromto字段

热门文章

  1. php imagick生成图片需要注意的问题
  2. cmake 编译安装mysql5.5.32
  3. Springboot 自动配置浅析
  4. jsp+servlet分页查询
  5. Redis持久化的几种方式——深入解析RDB
  6. 花了几个小时总结了一些容易出错的 Java 知识点!
  7. PHP 从另一个角度来分析 Laravel 框架的依赖注入功能
  8. mongodb基本命令,mongodb集群原理分析
  9. .NET Core 获取数据库上下文实例的方法和配置连接字符串
  10. linux下制作linux系统盘(光盘、U盘)