HTML 14 JS事件 - 爱码网

一：什么是事件

　　发生的某一件事；触发特定的条件，完成某一项功能

二：学习的目的

　　在特定的条件下，完成特定的功能

　　条件满足的情况下，系统会自动执行 ( 回调 ) 绑定的方法

　　学习要点：　

　　1、事件的两种绑定方式 ***
　　2、事件event *****
　　3、冒泡和默认事件 *****
　　4、鼠标事件 *****
　　5、键盘事件 ***
　　6、表单事件 ***
　　7、文档事件 *
　　8、图片事件 *
　　9、页面滚动事件 *****

三：

　　事件的两种绑定方式：

　　// on // 非on

　　1、on事件绑定

　　　　当有两个 div 只打印 " 点击2 " ，原因,只能绑定最后一个方法

　　　　解绑的方法：
　　　　div.onclick = null;

　　2、非on事件的绑定

　　　　存在重复绑定

　　　　事件解绑的方法：
　　　　div.removeEventListener('click', fn) // 注:绑定与移除需要指向同一个方法(地址)

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>事件的两种绑定方式</title>
 6 </head>
 7 <body>
 8     <div class="div">12345</div>
 9 </body>
10 <script type="text/javascript">
11     var div = document.querySelector('.div');
12     // on事件
13     div.onclick = function () {
14         console.log("点击1");
15     }
16     div.onclick = function () {
17         console.log("点击2");
18     }
19     // 只打印"点击2",原因,只能绑定最后一个方法
20 
21     // 事件的移除
22     div.onclick = null;
23 
24 
25     // 非on事件的绑定 *
26     // addEventListener('事件名', 回调函数, 冒泡方式)
27     div.addEventListener('click', function() {
28         console.log("点击1");
29     });
30 
31     var fn = function() {
32         console.log("点击2");
33     }
34     div.addEventListener('click', fn);
35     // 存在重复绑定
36 
37     // 事件的移除
38     // removeEventListener('事件名', 回调函数名)
39     div.removeEventListener('click', fn)
40     // 注:绑定与移除需要指向同一个方法(地址)
41 
42 </script>
43 </html>

事件的两种绑定方式