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就可以使用簡單的bind()，或者$().click()之類的函數(shù)解決，而如果不使用JavaScript框架的時(shí)候，大家可是使用下面的封裝bind()函數(shù)。

添加事件綁定 bind()

/************************************
* 添加事件綁定
* @param obj  : 要綁定事件的元素
* @param type : 事件名稱。不加 "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()對于上面的bind()函數(shù)

/************************************
* 刪除事件綁定
* @param obj : 要?jiǎng)h除事件的元素
* @param type : 事件名稱。不加 "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);

希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

微信小程序出現(xiàn)wx.navigateTo頁面不跳轉(zhuǎn)問題的解決方法
這篇文章主要介紹了微信小程序出現(xiàn)wx.navigateTo頁面不跳轉(zhuǎn)問題的解決方法,簡單分析了微信小程序出現(xiàn)wx.navigateTo頁面不跳轉(zhuǎn)情況的原因及相應(yīng)的解決方法,需要的朋友可以參考下
2017-12-12
JavaScript深入理解系列之call與apply
Function.prototype.call和Function.prototype.apply都是非常常用的方法,它們的作用一模一樣,區(qū)別僅在于傳入?yún)?shù)形式的不同,下面這篇文章主要介紹了JavaScript深入理解系列之call與apply的相關(guān)資料,需要的朋友可以參考下
2022-04-04
小程序?qū)崿F(xiàn)可拖動(dòng)的懸浮按鈕
這篇文章主要為大家詳細(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à)值，下面跟著小編一起來看下吧
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語句中的解構(gòu)賦值
這篇文章主要介紹了詳解ES6 export default 和 import語句中的解構(gòu)賦值，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-05-05
js 下拉菜單實(shí)現(xiàn)代碼
js 下拉菜單實(shí)現(xiàn)代碼，原理比較簡單，需要的朋友可以參考下，具體的美化要靠自己。
2010-05-05
項(xiàng)目中常用的JS方法整理
這里給大家整理的是本人上個(gè)項(xiàng)目中所用到的js方法，都是些非常常用的javascript方法，相信小伙伴們也能經(jīng)常用到，這里整理出來分享給大家。
2015-01-01
JavaScript結(jié)合canva實(shí)現(xiàn)簡單的繪圖工具
這篇文章主要給大家介紹了如何使用JavaScript和HTML的Canvas標(biāo)簽創(chuàng)建一個(gè)簡單的圖表工具,文中通過代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2024-12-12
詳解微信小程序之一鍵復(fù)制到剪切板
這篇文章主要介紹了微信小程序一鍵復(fù)制到剪切板，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04