當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript---事件监听
生活随笔
收集整理的這篇文章主要介紹了
JavaScript---事件监听
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
JavaScript的事件監(jiān)聽是通過addEventListener()來實(shí)現(xiàn)的
它算是事件綁定的第二種方式。
他的特別之處在于這種綁定事件的方法不會(huì)被同名事件覆蓋。
看具體的demo
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>事件監(jiān)聽</title> 6 <script> 7 window.onload = function(){ 8 /* 9 事件綁定的第二中方式： 10 事件監(jiān)聽addEventListener() 11 */ 12 var btn =document.getElementById('btn'); 13 var btn2 =document.getElementById('btn2'); 14 15 // 這種事件綁定方法同名事件會(huì)被覆蓋 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 // 事件監(jiān)聽 36 // addEventListener() 37 btn2.addEventListener('click',function(){ 38 console.log('第1次點(diǎn)擊') 39 },false); 40 btn2.addEventListener('click',function(){ 41 console.log('第2次點(diǎn)擊') 42 },false); 43 44 45 // 推薦的事件監(jiān)聽方式 46 // 用具名函數(shù) 47 function handler(){ 48 console.log('第3次點(diǎn)擊') 49 } 50 btn2.addEventListener('click',handler,false); 51 52 53 // 清除事件監(jiān)聽 54 // 參數(shù)一定要跟綁定時(shí)一樣 55 btn2.removeEventListener('click',handler); 56 57 58 // ie8-的事件監(jiān)聽方式 59 // attachEvent('onclick',) 60 // 沒有第三個(gè)參數(shù) 61 // btn2.attachEvent('onclick',handler); 62 // 63 // IE8-清除事件監(jiān)聽 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下的監(jiān)聽方式是attachEvent
轉(zhuǎn)載于:https://www.cnblogs.com/first-time/p/6591102.html
總結(jié)
以上是生活随笔為你收集整理的JavaScript---事件监听的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 宿舍助手app——个人工作第四天
- 下一篇： Entity Framework 的小实