• Web APIs：事件高级--DOM事件流及DOM事件流程代码验证

    事件流描述的是从页面中接收事件的顺序。

    事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即 DOM 事件流。

    比如我们给一个div 注册了点击事件：

    事件冒泡： IE 最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点的过程。

    事件捕获： 网景最早提出，由 DOM 最顶层节点开始，然后逐级向下传播到到最具体的元素接收的过程。 

    W3C 将这俩者结合起来

    DOM 事件流分为3个阶段：

    1. 捕获阶段 2. 当前目标阶段 3. 冒泡阶段

    抽象的理解为

    我们向水里面扔一块石头，首先它会有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具 体元素（目标点）的捕获过程；之后会产生泡泡，会在最低点（ 最具体元素）之后漂浮到水面上，这个过 程相当于事件冒泡。

    DOM事件流程代码验证 

    事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即 DOM 事件流注意

    1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。

    2. onclick 和 attachEvent 只能得到冒泡阶段。

    3. addEventListener(type, listener[, useCapture])第三个参数如果是 true，表示在事件捕获阶段调用事件处理程序；如果是 false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序。

    4. 实际开发中我们很少使用事件捕获，我们更关注事件冒泡。

    5. 有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave 6. 事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事件.

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title></title>
    6. 		<style>
    7. 			.father{
    8. 				overflow: hidden;
    9. 				width: 300px;
    10. 				height: 300px;
    11. 				margin: 100px auto;
    12. 				background-color: pink;
    13. 				text-align: center;
    14. 			}
    15. 			.son{
    16. 				width: 200px;
    17. 				height: 200px;
    18. 				margin: 50px;
    19. 				background-color: purple;
    20. 				line-height: 200px;
    21. 				color: #fff;
    22. 			}
    23. 		</style>
    24. 	</head>
    25. 	<body>
    26. 		<div class="father">
    27. 			<div class="son">son盒子</div>
    28. 	</div>
    29. 		<script>
    30. 			// 捕获阶段 如果addEventListener第三个参数是true那么就处于捕获阶段
    31. 			// document > html > body > father > son 
    32. 			var son=document.querySelector('.son');
    33. 			son.addEventListener("click",function(){
    34. 				alert('son')
    35. 			},true)
    36. 			var father=document.querySelector('.father')
    37. 			father.addEventListener('click',function(){
    38. 				alert('father')
    39. 			},true)
    40. 			// 冒泡阶段 如果addEventListener第三个参数是false或者省略 那么就处于捕获阶段
    41. 			// son > father > body >html > document 
    42. 			var son=document.querySelector('.son');
    43. 			son.addEventListener("click",function(){
    44. 				alert('son')
    45. 			},true)
    46. 			var father=document.querySelector('.father')
    47. 			father.addEventListener('click',function(){
    48. 				alert('father')
    49. 			},true)
    50. 		</script>
    51. 	</body>
    52. </html>

    事件捕获：当我们点击子标签，促发了父标签是事件，然后是子标签

    事件冒泡：当我点击子标签，先促发了子标签事件，然后是父标签

  • 相关阅读:
    项目开发的详细步骤（精华版）
    ID VS UUID 主键详解
    编码技巧——MongoDB的过期时间
    SpringCloud微服务实战——搭建企业级开发框架（三十七）：微服务日志系统设计与实现
    【ElasticSearch和whoosh实现项目中搜索功能】
    金仓数据库KingbaseES安全指南--6.3. Kerberos身份验证
    C# Color颜色RGB对照表
    滥用出资人权利的后果是什么
    【汇编语言02】第2章 寄存器——理论知识
    【培训课程专用】中断路由代码导读：当cpu运行在TEE来了一个Non secure Group1中断
  • 原文地址：https://blog.csdn.net/weixin_64612659/article/details/127039720