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