快捷導(dǎo)航

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

更新時間：2015年12月17日 16:54:35 作者：猿客

這篇文章主要介紹了js跨瀏覽器的事件偵聽器和事件對象的使用方法,需要的朋友可以參考下

本文特意為跨瀏覽器實現(xiàn)添加事件偵聽器和跨瀏覽器事件對象的使用方法做了下總結(jié)，并把這些方法打包，歡迎大家學(xué)習(xí)。
打包的一個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; 
      }
    },
    
    // 獲取鼠標(biāo)相對于文檔的位置,即頁面坐標(biāo)位置
    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);
  };

以上就是跨瀏覽器實現(xiàn)添加事件偵聽器和跨瀏覽器事件對象的使用方法，希望對大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: