javascript
JavaScript之事件的绑定与移除
? ? ? 對于事件的綁定的方法有多種多樣，但是在解除綁定事件的時候，就要注意使用的是那種綁定事件的方法，因為不同的綁定方法所對應的解除事件是不同的。
1. 原始寫法
1.1 綁定事件：對象.事件=事件處理函數
? ? ? ? ?
<!doctype html> <html> <head> <style type="text/css"> #div1{ width:200px; height:200px; background:pink; margin-bottom: 10px; } </style> </head> <body> <div id="div1"></div>?? <button type="button" id="btn1">綁定事件</button> <button type="button" id="btn2">移除事件</button> </body><script type="text/javascript">
var btn1= document.getElementById("btn1");
btn1.onclick = function(){
alert(1);
}
</script> </html>
1.2 ?解除事件：?對象.事件=null (此方法就是函數的覆蓋)
? ? ??
<script type="text/javascript">
var btn1= document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
btn1.onclick = function(){
alert("btn1事件綁定成功！");
}
btn2.onclick = function(){
btn1.onclick =null;
alert("btn1所綁定的事件已經被移除！");
}
</script>
運行結果：在開始是，點擊“綁定事件”按鈕，會彈出一個提示框“btn1事件綁定成功！”，當點擊“移除事件”按鈕時，btn1所綁定的事件就已經移除了，并彈出提示
? ? ? ? ? ? ? ? ? ? ======================================================
2. 使用?attachEvent 、detachEvent、addEventListener 與?removeEventListener
2.1 事件綁定------attachEvent ，addEventListener?
? ? ? ?使用 attachEvent 和 addEventListenter 的好處就是，可以多次的進行事件的綁定，不向原始的方法那樣，前面綁定的事件將會被后面的綁定的事件所覆蓋，最后只能執行后面所綁定的函數。
attachEvent
<script type="text/javascript">var btn1= document.getElementById("btn1");btn1.attachEvent ('onclick',function(){alert('1');});btn1.attachEvent ('onclick',function(){alert('2');}); </script>運行結果：2，1
? ? ?說明：attachEVent 是先綁定后執行，它將先執行我后綁定的函數。
? ? ?注意：1）attachEvent 只能兼容 IE7，IE8；
? ? ? ? ? ? ?2）attachEvent 綁定的事件前面要加“on”
? ? ? ??? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
addEventListener?
<script type="text/javascript">var btn1= document.getElementById("btn1");btn1.addEventListener ('click',function(){alert('1');},false);btn1.addEventListener ('click',function(){alert('2');},false); </script>
運行結果：1，2
? ? ?說明：1)?addEventListener?是先綁定先執行，它將按順序執行我綁定的事件。
? ? ? ? ? ? ? 2) addEventListener 的第三個參數：
? ? ? ? ? ? ? ? ??布爾值參數是true，表示在捕獲階段調用事件處理程序；如果是false，表示在冒泡階段調用事件處理程序
? ? ?注意：1）addEventListener 與?attachEVent 正好相反，?只不兼容 IE7，IE8，其他大部分的瀏覽器都可以執行。
? ? ? ? ? ? ?2）addEventListener?綁定的事件前面不要加“on”
2.2 事件解除------detachEvent，removeEventListener
? detachEvent
<script type="text/javascript">var fun = function(){alert(11);}var btn1= document.getElementById("btn1");var btn1= document.getElementById("btn1");btn1.attachEvent ('onclick',fun,false);btn1.detachEvent('onclick',fun,false); </script>removeEventListener
<script type="text/javascript">var fun = function(){alert(1);}var btn1= document.getElementById("btn1");btn1.addEventListener('click',fun,false);btn1.removeEventListener('click',fun,false); </script>注意：1） 在removeEventListener 傳入的參數與?addEventListener 傳入的參數要一致，看似使用了相同的參數，但實際上，第二個參數與傳入addEventListener()中的與第一個是完全不同的函數。
? ? ? ? ? ? ?2） 因為移除時傳入的參數與添加處理程序時使用的參數相同。這也意味著通過addEventListener()添加的匿名函數無法移除。
btn1.addEventListener('click',function(){alert(1);},false);btn1.removeEventListener('click',function(){alert(1);},false);//無效? ? ? 3）在公用函數體存在參數的情況下，不能將帶參數的函數體傳給 addEventListener 和 romoveEventListener。
? ? ? 錯誤示例：
<script type="text/javascript">var fun = function(e){e.preventDefault();//阻止事件目標的默認動作alert(1);}var btn1= document.getElementById("btn1");btn1.addEventListener('click',fun(event),false);btn1.removeEventListener('click',fun(event),false); </script>正確示例：
<script type="text/javascript">var fun = function(e){e.preventDefault();//阻止事件目標的默認動作alert(1);}var btn1= document.getElementById("btn1");btn1.addEventListener('click',fun,false);btn1.removeEventListener('click',fun,false); </script>? ? ? ? ? ? ?4）detachEvent 與? ?removeEventListener 注意事項相同。
? ? ? ??
?
轉載于:https://www.cnblogs.com/Ayinger/p/6723730.html
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的JavaScript之事件的绑定与移除的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 判断设备-安卓|苹果|微信
- 下一篇： 等了半个多月的悟空宝终身寿险