當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript---事件监听
生活随笔
收集整理的這篇文章主要介紹了
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
轉載于:https://www.cnblogs.com/first-time/p/6591102.html
總結
以上是生活随笔為你收集整理的JavaScript---事件监听的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 宿舍助手app——个人工作第四天
- 下一篇： JavaScript中随着鼠标拖拽而移动