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

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

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

本文為大家分享了javascript跨瀏覽器事件處理機制，供大家參考，具體內(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)容，希望對大家的學習有所幫助。

您可能感興趣的文章:

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