溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

js綁定事件和解綁事件

發(fā)布時間：2020-10-20 11:30:00 來源：腳本之家 閱讀：125 作者：Cythia-milk 欄目：web開發(fā)

在js中綁定多個事件用到的是兩個方法:attachEvent和addEventListener,但是這兩個方法又存在差異性

attachEvent方法  只支持IE678,不兼容其他瀏覽器

addEventListener方法   兼容火狐谷歌,不兼容IE8及以下

addEventListener方法

div.addEventListener('click',fn);

div.addEventListener('click',fn2);
function fn(){ console.log("春雨綿綿"); }

function fn2(){
        console.log("到處潮濕");
      }

attachEvent方法

div.attachEvent('onclick',fn);
div.attachEvent('onclick',fn2);
function fn(){ console.log("春雨綿綿"); }
function fn2(){
        console.log("到處潮濕");
      }

注意點:attachEvent方法綁定的事件是帶on的,addEventListener綁定的事件是不帶on的

下面我寫了一個兼容了IE和火狐谷歌的方法

var div=document.getElementsByTagName("div")[0];
      addEvent('click',div,fn)
      function addEvent(str,ele,fn){
        ele.attachEvent?ele.attachEvent('on'+str,fn):ele.addEventListener(str,fn);
      }
      function fn(){
        console.log("春雨綿綿");
      }

這樣就完美的解決了兼容性的問題

有綁定事件的話,那就肯定有解綁事件,但是解綁事件和綁定事件一樣,萬惡的IE還是會搞特殊化

detachEvent方法  只支持IE678,不兼容其他瀏覽器

removeEventListener方法   兼容火狐谷歌,不兼容IE8及以下

detachEvent方法寫法:

ele.detachEvent("onclick",fn);

removeEventListener的寫法:

ele.removeEventListener("click",fn);

下面我寫了一個兼容性的方法給大家參考,實現(xiàn)也是很簡單

function remove(str,ele,fn){
        ele.detachEvent?ele.detachEvent("on"+str,fn):ele.removeEventListener(str,fn);
      }

注意點:不管是綁定事件attachEvent還是刪除事件detachEvent都是要加on的,removeEventListenser和addEventListenser則不需要加on

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持億速云

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。

AI
助
手