js繫結事件和解綁事件

2022-07-13 14:45:22 字數 1286 閱讀 7352

在js中繫結多個事件用到的是兩個方法:attachevent和addeventlistener,但是這兩個方法又存在差異性

attachevent方法  只支援ie678,不相容其他瀏覽器

addeventlistener方法   相容火狐谷歌,不相容ie8及以下

addeventlistener方法

div.addeventlistener('click',fn);

div.addeventlistener('click',fn2);
function

fn()

functionfn2()

attachevent方法

div.attachevent('onclick',fn);

div.attachevent('onclick',fn2);

function fn()

function

fn2()

注意點:attachevent方法繫結的事件是帶on的,addeventlistener繫結的事件是不帶on的

下面我寫了乙個相容了ie和火狐谷歌的方法

var div=document.getelementsbytagname("div")[0];

addevent('click',div,fn)

function

addevent(str,ele,fn)

function

fn()

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

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

detachevent方法  只支援ie678,不相容其他瀏覽器

removeeventlistener方法   相容火狐谷歌,不相容ie8及以下

detachevent方法寫法:

ele.detachevent("onclick",fn);

removeeventlistener的寫法:

ele.removeeventlistener("click",fn);

下面我寫了乙個相容性的方法給大家參考,實現也是很簡單

function remove(str,ele,fn)

注意點:不管是繫結事件attachevent還是刪除事件detachevent都是要加on的,removeeventlistenser和addeventlistenser則不需要加on

繫結事件和解綁事件

繫結事件 1.物件.on 事件型別 事件處理函式 物件 on 事件型別 事件處理函式 2.物件.addeventlistener 事件型別 事件處理函式 false 火狐 谷歌 ie11支援 ie8 不支援 3.物件.attachevent on 事件型別,事件處理函式 火狐 谷歌 ie11不支援 ...

jQuery的事件繫結和解綁

語法 bind type,data,fn 描述 為每乙個匹配元素的特定事件 像click 繫結乙個事件處理器函式。引數解釋 string 事件型別 object 可選 作為event.data屬性值傳遞給事件物件的額外資料物件 function 繫結到每個匹配元素的事件上面的處理函式 示例 當每個p...

事件的繫結和解綁 jQuery

之前學的滑鼠事件,表單事件與鍵盤事件都有個特點,就是直接給元素繫結乙個處理函式,所有這類事件都是屬於快捷處理。翻開原始碼其實可以看到,所有的快捷事件在底層的處理都是通過乙個 on 方法來實現的。jquery on 方法是官方推薦的繫結事件的乙個方法。基本用法 on events selector d...