欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js跨瀏覽器的事件偵聽器和事件對象的使用方法

 更新時間:2015年12月17日 16:54:35   作者:猿客  
這篇文章主要介紹了js跨瀏覽器的事件偵聽器和事件對象的使用方法,需要的朋友可以參考下

本文特意為跨瀏覽器實現添加事件偵聽器和跨瀏覽器事件對象的使用方法做了下總結,并把這些方法打包,歡迎大家學習。
打包的一個EventUtil對象

var EventUtil = {
    // 添加偵聽事件
    addEventListener:function (element, type, handler) {
      // IE9+、Firefox、Safari、chrome和Opera
      if(element.addEventListener) {
        element.addEventListener(type, handler, false);
      }
      // IE8-
      else if(element.attachEvent) {
        element.attachEvent("on" + type, handler);
      }
    },
    
    // 移除偵聽事件
    removeEventListener:function (element, type, handler) {
      // IE9+、Firefox、Safari、chrome和Opera
      if(element.addEventListener) {
        element.removeEventListener(type, handler, false);
      }
      // IE8-
      else if(element.attachEvent) {
        element.detachEvent("on" + type, handler);
      }
    },
    
    // 獲取事件對象
    getEvent:function(event) {
      if(typeof event == "undefined") {
        event = window.event; // IE瀏覽器
      }
      return event;
    },
    
    // 獲取觸發(fā)事件的元素
    getTarget:function(event){
      if(typeof event.srcElement == "undefined") {
        return event.target;
      }else {
        return event.srcElement; // IE瀏覽器
      }
    },
    
    // 獲取事件類型
    getType:function(event) {
      return event.type;
    },
    
    // 獲取按鍵鍵碼
    getCharCode:function(event) {
      if(typeof event.keyCode == "number") {
        return event.keyCode; // IE8-、Firefox和opera
      }else {
        return event.charCode; 
      }
    },
    
    // 獲取鼠標相對于文檔的位置,即頁面坐標位置
    getPagePosition:function(event) {
      var pageX = event.pageX,
        pageY = event.pageY;
      if(pageX == undefined) {
        pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
      }
      if(pageY == undefined) {
        pageY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
      }
      return {
        pageX:pageX,
        pageY:pageY
      };
    },
    
    // 阻止事件的默認行為
    preventDefault:function(event) {
      if(event.preventDefault){
        event.preventDefault();
      }else {
        event.returnValue = false; // IE瀏覽器
      }
    },
    
    // 阻止事件冒泡
    stopPropagation:function(event) {
      if(typeof event.cancelBubble == "undefined") {
        event.stopPropagation();
      }else {
        event.cancelBubble = true; // IE瀏覽器
      }
    }
  };

測試代碼

<div id="box" style="color:red;width: 100%;height:200px;" >
  <input type="button" value="點擊" id="btn" />
</div>
<a  id="a">test</a>
var box = document.querySelector("#box");
  box.onclick = function(event) {
    event = EventUtil.getEvent(event);
    alert(EventUtil.getType(event));
    alert(EventUtil.getTarget(event));
  };
  var input = document.querySelector("input");
  input.onclick = function(event) {
    event = EventUtil.getEvent(event);
    EventUtil.stopPropagation(event);
  };
  
  var a = document.getElementById("a");
  a.onclick = function(event) {
    event = EventUtil.getEvent(event);
    EventUtil.preventDefault(event);
  };

以上就是跨瀏覽器實現添加事件偵聽器和跨瀏覽器事件對象的使用方法,希望對大家的學習有所幫助。

相關文章

  • JavaScript移動端常用事件之touch觸摸事件詳解

    JavaScript移動端常用事件之touch觸摸事件詳解

    觸屏事件touch也稱為觸摸事件,touch對象代表一個觸摸點,觸摸點可能是一根手指,也可能是一根觸摸筆,觸屏事件可響應用戶手指(或觸摸筆)對屏幕或者觸控板操作,下面這篇文章主要給大家介紹了關于JavaScript移動端常用事件之touch觸摸事件的相關資料,需要的朋友可以參考下
    2022-10-10
  • javascript實現全角與半角字符的轉換

    javascript實現全角與半角字符的轉換

    這篇文章主要介紹了javascript實現全角與半角字符的轉換的相關代碼與知識點分享,需要的朋友可以參考下
    2015-01-01
  • javascript if條件判斷方法小結

    javascript if條件判斷方法小結

    今天在為網站增加一些代碼功能的時候,需要用到if條件判斷,發(fā)現簡寫方法忘了,這里特整理下
    2014-05-05
  • js實現的二級橫向菜單條實例

    js實現的二級橫向菜單條實例

    這篇文章主要介紹了js實現的二級橫向菜單條,是非常美觀簡潔的二級導航條效果,可實現針對鼠標事件的動態(tài)響應及頁面樣式切換功能,簡單實用,需要的朋友可以參考下
    2015-08-08
  • Textbox控件注冊回車事件及觸發(fā)按鈕提交事件具體實現

    Textbox控件注冊回車事件及觸發(fā)按鈕提交事件具體實現

    Lyncplus客戶端中訪問Web頁面時遇到了TextBox控件回車自動完成按鈕的提交事件失效的情況,于是上網查找相關的介紹最終解決了這兩個問題,感興趣的你可以參考下或許對你有所幫助
    2013-03-03
  • JS數組去掉重復數據只保留一條的實現代碼

    JS數組去掉重復數據只保留一條的實現代碼

    這篇文章主要介紹了JS數組去掉重復數據只保留一條的實現代碼,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2016-08-08
  • JavaScript實現圖片瀑布流和底部刷新

    JavaScript實現圖片瀑布流和底部刷新

    這篇文章主要為大家詳細介紹了JavaScript實現圖片瀑布流和底部刷新,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-01-01
  • Bootstrap基本組件學習筆記之列表組(11)

    Bootstrap基本組件學習筆記之列表組(11)

    這篇文章主要為大家詳細介紹了Bootstrap基本組件學習筆記之列表組,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-12-12
  • JavaScript學習筆記之數組求和方法

    JavaScript學習筆記之數組求和方法

    這篇文章主要介紹了JavaScript學習筆記之數組求和方法的相關資料,需要的朋友可以參考下
    2016-03-03
  • JavaScript數據結構之二叉樹的查找算法示例

    JavaScript數據結構之二叉樹的查找算法示例

    這篇文章主要介紹了JavaScript數據結構之二叉樹的查找算法,結合具體實例形式分析了javascript針對二叉樹節(jié)點最小值、最大值的相關查找操作實現技巧,需要的朋友可以參考下
    2017-04-04

最新評論