理解事件中的概念：
事件流：从页面接受事件的顺序 事件捕获 和 事件冒泡
事件捕获：不太具体的节点更早接受事件 而最具体的节点最后接受到事件
事件冒泡：事件最开始由最具体的元素 然后逐渐向上传播到不具体的元素
使用事件处理程序：
1. HTML事件
2. DOM 0级事件处理程序 把一个函数赋值给一个事件处理程序
3. DOM 2级事件处理程序 addEventLister 和 removeEventLister
- 要处理的事件名
- 作为事件处理的函数
- 布尔值 true 在捕获阶段调用事件处理程序 false 在冒泡阶段调用事件处理程序
事件流
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: 300px;
12. background-color: red;
13. }
14. </style>
15. </head>
16. <body id="box">
17. <input type="button" id="btn1" value="按钮1" onclick="click1(event)">
18. <input type="button" id="btn2" value="按钮2">
19. <input type="button" id="btn3" value="按钮3">
20. <section>
21. <div>点击</div>
22. </section>
23. <script>
24. // HTML事件处理程序（写在标签上触发）
25. function click1(ev){
26. console.log('11')
27. console.log(ev.target.nodeName)
28. }
29. // event表示事件对象
30. // onclick监听事件 点击时触发
31. // click1 表示事件发生的时候执行的函数
32.
33.
34. // DOM 0级事件处理程序
35. var btn2 =document.getElementById('btn2')
36. btn2.onclick =function(){
37. alert('我被攻击了')
38. }
39.
40. btn2.onclick =null
41. // DOM 0级删除事件
42.
43. btn2.onclick = function(){
44. alert('1234')
45. }
46.
47.
48. // DOM 2 级事件处理程序
49. var btn3 =document.getElementById('btn3')
50. btn3.addEventListener('click',aa,false)
51. btn3.addEventListener('click',cc,true)
52. // addEventListener 添加事件监听者
53. // 第一个参数添加事件类型 不能带“on”
54. // 第二个参数事件发生时执行的函数 不带“()”
55. // 第三个参数指的是在冒泡阶段或是在捕获阶段
56. function aa(){
57. alert('aaaa')
58. }
59. function cc(){
60. alert('cccccc')
61. }
62. btn3.removeEventListener('click',aa,false)
63. btn3.removeEventListener('click',aa,true) //无效
64. btn3.removeEventListener('click',cc,true)
65. // 移除事件 如果添加两次事件 一次是捕获阶段 一次是冒泡阶段
66.
67.
68. // ---捕获、冒泡过程---
69.
70. var box = document.getElementById('box')
71. box.addEventListener('click',function(){
72. alert('你好')
73. },true)
74.
75. var sec =document.querySelector('section')
76. var div = document.querySelector('div')
77.
78. document.documentElement.addEventListener('click',function(){alert('html-捕获')},true)
79. document.documentElement.addEventListener('click',function(){alert('html-冒泡')},false)
80.
81. document.body.addEventListener('click',function(){alert('body-捕获')},true)
82. document.body.addEventListener('click',function(){alert('body-冒泡')},false)
83.
84. sec.addEventListener('click',function(){alert('sec-捕获')},true)
85. sec.addEventListener('click',function(){alert('sec-冒泡')},false)
86.
87. div.addEventListener('click',function(){alert('div-捕获')},true)
88. div.addEventListener('click',function(){alert('div-冒泡')},false)
89.
90. // 事件捕获：即从窗口开始逐步查找最终捕获的触发事件的标签元素 捕获成功后开始冒泡
91. </script>
92. </body>
93. </html>