JavaScript---事件监听

　　JavaScript的事件监听是通过addEventListener()来实现的

　　　　它算是事件绑定的第二种方式。

　　　　　　他的特别之处在于这种绑定事件的方法不会被同名事件覆盖。

　　看具体的demo

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>事件监听</title>
 6     <script>
 7         window.onload = function(){
 8             /*
 9                 事件绑定的第二中方式：
10                 事件监听addEventListener()
11              */
12             var btn =document.getElementById('btn');
13             var btn2 =document.getElementById('btn2');
14 
15             // 这种事件绑定方法同名事件会被覆盖
16             btn.onclick = function(){
17                 console.log('click');
18             }
19 
20             btn.onclick = function(){
21                 console.log('第二次click');
22             }
23 
24             btn.addEventListener('click',function(){
25                 console.log('第三次click');
26             },false);
27 
28             btn.onclick = function(){
29                 console.log('第四次click');
30             }
31 
32             // 清除事件
33             btn.onclick = null;
34 
35             // 事件监听
36             // addEventListener()
37             btn2.addEventListener('click',function(){
38                 console.log('第1次点击')
39             },false);
40             btn2.addEventListener('click',function(){
41                 console.log('第2次点击')
42             },false);
43 
44 
45             // 推荐的事件监听方式
46             // 用具名函数
47             function handler(){
48                 console.log('第3次点击')
49             }
50             btn2.addEventListener('click',handler,false);
51 
52 
53             // 清除事件监听
54             // 参数一定要跟绑定时一样
55             btn2.removeEventListener('click',handler);
56 
57 
58             // ie8-的事件监听方式
59             // attachEvent('onclick',)
60             // 没有第三个参数
61             // btn2.attachEvent('onclick',handler);
62             // 
63             // IE8-清除事件监听
64             // btn2.detachEvent('onclick',handler);
65         }
66     </script>
67 </head>
68 <body>
69     <button id="btn">按钮</button>
70     <button id="btn2">按钮2</button>
71 </body>
72 </html>

　　　　要注意IE-8下的监听方式是attachEvent

JavaScript---事件监听

相关推荐