JS クロスブラウザ イベント リスナーとイベント オブジェクトの使用方法_JavaScript スキル

この記事では、イベント リスナーを追加する方法と、クロスブラウザ実装のためにクロスブラウザ イベント オブジェクトを使用する方法を特に要約し、これらのメソッドをパッケージ化しています。誰でも学習できます。
パッケージ化された 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;
    },
    
    // 获取触发事件的元素
    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 href="http://www.test.com" 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);
  };

上記は、ブラウザー間でイベント リスナーとクロスブラウザー イベント オブジェクトを追加する方法です。皆さんの学習に役立つことを願っています。