詳解javascript跨瀏覽器事件處理程序

更新時(shí)間：2016年03月27日 10:15:22 作者：subying

這篇文章主要為大家詳細(xì)介紹了javascript跨瀏覽器事件處理機(jī)制，感興趣的小伙伴們可以參考一下

本文為大家分享了javascript跨瀏覽器事件處理機(jī)制，供大家參考，具體內(nèi)容如下

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>跨瀏覽器的事件處理程序</title>
</head>
<body>
  <input type="button" value="click me" id="myBtn"/>
  <input type="button" value="解除" id="unlisten"/>
 
  <script>
 
    function $(id){
      return document.getElementById(id);
    }
 
    var EventUtil={
      fnCount:0
      ,fnData:{}
      ,addHandler:function(element,type,handler){
        this.fnCount++;
        handler.fid = this.fnCount;
        var _fn = handler;
        handler = function(){
          _fn.call(element);
        };
        this.fnData[this.fnCount] = handler;
 
        if(element.addEventListener){
          element.addEventListener(type,handler,false);
        }  else if(element.attachEvent){
          element.attachEvent("on"+type,handler);
        }  else {
          element["on"+type]=handler;
        }
      }
      ,removeHandler:function(element,type,handler){
        handler = this.fnData[handler.fid];
        if(element.removeEventListener){
            element.removeEventListener(type,handler,false);
        }else if(element.detachEvent){
            element.detachEvent("on"+type,handler);
        }else{
            element["on"+type]=null;
        }
      }
    }
 
    var btn=$("myBtn");
    var unbtn = $('unlisten');
    var bindFn1=function(){
      alert(this.id);
    };
    var bindFn2=function(){
      alert('2');
    };
 
    EventUtil.addHandler(btn,"click",bindFn1);
    EventUtil.addHandler(btn,"click",bindFn2);
    //EventUtil.removeHandler(btn,"click",bindFn1);
    EventUtil.addHandler(unbtn,"click",function(){
      EventUtil.removeHandler(btn,"click",bindFn1);
    });
 
 
  </script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章:

相關(guān)文章

Java通過WebSocket實(shí)現(xiàn)異步導(dǎo)出解決思路
這篇文章主要介紹了通過WebSocket實(shí)現(xiàn)異步導(dǎo)出,本篇文章記錄大批量數(shù)據(jù)導(dǎo)出時(shí)間過長,導(dǎo)致接口請(qǐng)求超時(shí)問題,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2024-01-01
手機(jī)端圖片縮放旋轉(zhuǎn)全屏查看PhotoSwipe.js插件實(shí)現(xiàn)
這篇文章主要介紹了手機(jī)端圖片縮放旋轉(zhuǎn)全屏查看PhotoSwipe.js插件實(shí)現(xiàn)，感興趣的小伙伴們可以參考一下
2016-08-08
JavaScript手寫數(shù)組的常用函數(shù)總結(jié)
這篇文章主要給大家介紹了關(guān)于JavaScript手寫數(shù)組常用函數(shù)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-11-11
JS+CSS實(shí)現(xiàn)大氣清新的滑動(dòng)菜單效果代碼
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)大氣清新的滑動(dòng)菜單效果代碼,通過鼠標(biāo)事件結(jié)合定時(shí)函數(shù)實(shí)現(xiàn)頁面元素動(dòng)態(tài)變換的效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-10-10
js獲得頁面的高度和寬度的方法
做一個(gè)彈出dialog時(shí)用到了取父頁面的寬度和高度的方法,需要的朋友可以參考下
2014-02-02
JavaScript獲得選中文本內(nèi)容的方法
今天希望實(shí)現(xiàn)一個(gè)，直接在網(wǎng)頁上選中文本，點(diǎn)擊收藏夾的鏈接（javascript）即可彈出新窗口（類似“百度搜藏”和“QQ書簽”），新窗口中的文本框即顯示了選中的文本。
2008-12-12
AutoJs實(shí)現(xiàn)刷寶短視頻的思路詳解
這篇文章主要介紹了AutoJs實(shí)現(xiàn)刷寶短視頻的思路詳解,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-05-05
javascript中checkbox使用方法簡單實(shí)例演示
這篇文章通過簡單的實(shí)例演示了javascript中checkbox使用方法，感興趣的小伙伴們可以參考一下
2015-11-11
關(guān)于頁面嵌入swf覆蓋div層的問題的解決方法
這篇文章主要介紹了關(guān)于頁面嵌入swf覆蓋div層的問題的解決方法,需要的朋友可以參考下
2014-02-02
第五篇Bootstrap 排版
使用bootstrap的排版特性可以創(chuàng)建標(biāo)題，段落，列表及其它內(nèi)聯(lián)元素。本文重點(diǎn)給大家介紹Bootstrap 排版知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧
2016-06-06