JavaScript實(shí)現(xiàn)跨瀏覽器的添加及刪除事件綁定函數(shù)實(shí)例
更新時(shí)間：2015年08月04日 15:18:43 作者：黑咖啡
這篇文章主要介紹了JavaScript實(shí)現(xiàn)跨瀏覽器的添加及刪除事件綁定函數(shù),采用純javascript實(shí)現(xiàn)jquery的bind及unbind添加與刪除事件綁定的技巧,具有很好的瀏覽器兼容性,需要的朋友可以參考下
本文實(shí)例講述了JavaScript實(shí)現(xiàn)跨瀏覽器的添加及刪除事件綁定函數(shù)。分享給大家供大家參考。具體如下：
IE 的事件綁定函數(shù)是 attachEvent；而 Firefox, Safari 是 addEventListener；Opera 則兩種都支持。使用jQuery就可以使用簡(jiǎn)單的bind()，或者$().click()之類(lèi)的函數(shù)解決，而如果不使用JavaScript框架的時(shí)候，大家可是使用下面的封裝bind()函數(shù)。
添加事件綁定 bind()
/************************************
* 添加事件綁定
* @param obj : 要綁定事件的元素
* @param type : 事件名稱(chēng)。不加 "on". 如 : "click" 而不是 "onclick".
* @param fn : 事件處理函數(shù)
************************************/
function bind( obj, type, fn ){
if( obj.attachEvent){
obj['e'+type+fn]= fn;
obj[type+fn]=function(){
obj['e'+type+fn]( window.event);
}
obj.attachEvent('on'+type, obj[type+fn]);
}else
obj.addEventListener( type, fn,false);
}
例如給document添加一個(gè)點(diǎn)擊事件：
var fn=function(){
alert("Hello, World!!");
};
bind(document,"click", fn);
刪除事件綁定 unbind()
unbind()對(duì)于上面的bind()函數(shù)
/************************************
* 刪除事件綁定
* @param obj : 要?jiǎng)h除事件的元素
* @param type : 事件名稱(chēng)。不加 "on". 如 : "click" 而不是 "onclick"
* @param fn : 事件處理函數(shù)
************************************/
function unbind( obj, type, fn ){
if( obj.detachEvent){
obj.detachEvent('on'+type, obj[type+fn]);
obj[type+fn]=null;
}else
obj.removeEventListener( type, fn,false);
}
例如刪除第一個(gè)綁定的document點(diǎn)擊事件：
復(fù)制代碼 代碼如下:
unbind(document,"click",fn);
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
微信小程序出現(xiàn)wx.navigateTo頁(yè)面不跳轉(zhuǎn)問(wèn)題的解決方法
這篇文章主要介紹了微信小程序出現(xiàn)wx.navigateTo頁(yè)面不跳轉(zhuǎn)問(wèn)題的解決方法,簡(jiǎn)單分析了微信小程序出現(xiàn)wx.navigateTo頁(yè)面不跳轉(zhuǎn)情況的原因及相應(yīng)的解決方法,需要的朋友可以參考下2017-12-12
Function.prototype.call和Function.prototype.apply都是非常常用的方法,它們的作用一模一樣,區(qū)別僅在于傳入?yún)?shù)形式的不同,下面這篇文章主要介紹了JavaScript深入理解系列之call與apply的相關(guān)資料,需要的朋友可以參考下2022-04-04
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)可拖動(dòng)的懸浮按鈕，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
js實(shí)現(xiàn)帶三角符的手風(fēng)琴效果
本文主要介紹了js實(shí)現(xiàn)帶三角符手風(fēng)琴效果的實(shí)例。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-03-03
js實(shí)現(xiàn)表格的隔行變色和上下移動(dòng)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)表格的隔行變色和上下移動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
詳解ES6 export default 和 import語(yǔ)句中的解構(gòu)賦值
這篇文章主要介紹了詳解ES6 export default 和 import語(yǔ)句中的解構(gòu)賦值，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05
js 下拉菜單實(shí)現(xiàn)代碼，原理比較簡(jiǎn)單，需要的朋友可以參考下，具體的美化要靠自己。2010-05-05
這里給大家整理的是本人上個(gè)項(xiàng)目中所用到的js方法，都是些非常常用的javascript方法，相信小伙伴們也能經(jīng)常用到，這里整理出來(lái)分享給大家。2015-01-01
JavaScript結(jié)合canva實(shí)現(xiàn)簡(jiǎn)單的繪圖工具
這篇文章主要給大家介紹了如何使用JavaScript和HTML的Canvas標(biāo)簽創(chuàng)建一個(gè)簡(jiǎn)單的圖表工具,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-12-12
這篇文章主要介紹了微信小程序一鍵復(fù)制到剪切板，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04