1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
7. <title>事件传播控制</title>
8. <style>
9. div{
10. width: 300px;
11. height: 50px;
12. background-color: red;
13. color: white;
14. }
15. </style>
16. </head>
17. <body>
18. <section>
19. <div>
20. <a href="https://www.baidu.com">这个可以点击</a>
21. </div>
22. </section>
23. <script>
24. var div =document.querySelector('div')
25. var sec =document.querySelector('section')
26.
27. document.documentElement.addEventListener('click',function(){alert('HTML-挖洞')},true)
28. document.documentElement.addEventListener('click',function(){alert('HTML-冒泡')},false)
29.
30. document.body.addEventListener('click',function(){alert('body-挖洞')},true)
31. document.body.addEventListener('click',function(){alert('body-冒泡')},false)
32.
33. sec.addEventListener('click',function(e){
34. alert('section-挖洞')
35. // e.stopPropagation()
36. // 停止事件传播 即会停止挖洞过程也可以停止冒泡
37. // 不会影响同级别的事件监听者
38.
39. // e.stopImmediatePropagation()
40. // 停止同级别的多个事件监听者的调用
41. // 不管用哪个方法都会停止挖洞或冒泡 但都不会影响超链接跳转
42. // 超链接跳转是整个事件传播完成之后才进行跳转的
43.
44. e.preventDefault()
45. // 阻止事件的默认行为 如 超链接跳转 或 表单提交 时
46. // 使用e.defaultPrevented 可以获取事件的默认行为是否已经被阻止
47.
48. },true)
49. sec.addEventListener('click',function(e){
50. alert('section-挖洞2')
51. // e.stopPropagation()
52. },true)
53. sec.addEventListener('click',function(e){
54. alert('section-冒泡')
55. // e.stopPropagation()
56.
57. // alert(e.defaultPrevented) //true
58.
59. e.defaultPrevented =false
60. // 不能将已阻止的默认行为恢复
61.
62. },false)
63.
64. div.addEventListener('click',function(){alert('div-挖洞')},true)
65. div.addEventListener('click',function(){alert('div-冒泡')},false)
66.
67. // 第三个参数为true的时候 监听者调用比较早 设置false是比较晚
68. // 如果不传第三个参数 监听者调用事件比较晚 会在冒泡阶段调用
69.
70. sec.onclick =function(){
71. alert('哪个阶段调用')
72. }
73. // 在冒泡阶段调用
74. </script>
75. </body>
76. </html>