跨浏览器的javascript事件和对象的封装

跨浏览器的事件处理程序

DOM0级处理事件

将一个函数赋值给一个事件处理程序属性

事件流： 冒泡阶段

使用：

一、为元素增长事件：

let btn = document.getElementById("myBtn");
btn.onclick = function(){
  alert(this.id);
}
复制代码

二、删除事件：

let btn = document.getElementById("myBtn");
btn.onclick = null;
复制代码

DOM2级事件处理程序

两个方法： addEventListener()和removeEventListener()

三个参数： 处理事件名，事件处理程序，布尔值。（最后的布尔值为true，表示在捕获阶段调用事件处理程序；为false，表示在冒泡调用事件处理程序）

使用：

一、为元素增长事件：

let btn = document.getElementById("myBtn");
let handler = function(){
    alert(this.id);
}
btn.addEventListener('click',handler,false);
复制代码

二、删除事件：

btn.removeEventListener('click',handler,false);
复制代码

注意：

1），addEventListener()添加的匿名函数将没法移除；

2），大多数状况下，都是将事件处理程序添加到事件流的冒泡阶段（即第三个参数为false）；

3），若是添加了多个事件处理程序，会按照添加它们的顺序触发。

IE事件处理程序

两个方法： attachEvent(),detachEvent()

两个参数： 事件处理程序名称，事件处理程序函数

事件流： 冒泡阶段

使用：

一、为元素增长事件：

let btn = document.getElementById("myBtn");
let handler = function(){
    alert(this.id);
}
btn.attachEvent('onclick',handler)
复制代码

二、删除事件：

btn.detachEvent('onclick',handler);
复制代码

注意： 与DOM方法不一样的是，这些事件处理程序不是以添加它们的顺序执行，而是以相反的顺序被触发。

跨浏览器的事件处理程序

为了以跨浏览器的方式处理事件，保证处理事件的代码能在大多数浏览器下一致运行，建立本身的对象，包含上面两个方法。

let EventUnit = {
  addHandle:function(element,type,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){
    if(element.removeEventListener){
      element.removeEventListener(type,handler,false);
    }else if(element.detachEvent){
      element.detachEvent("on"+type,handler)
    }else{
      element["on"+type] = null;
    }
  }
};
复制代码

用法：

let btn = document.getElementById('myBtn');
let handler = function(){
  alert(this.id);
};
EventUnit.addHandle(btn,'click',handler);
EventUnit.removeHandler(btn,'click',handler);
复制代码

事件对象

在触发DOM上的某个事件时，会产生一个事件对象，这个对象包含着全部与事件有关的信息。

DOM中的事件对象（DOM0级和DOM2级）

• 兼容DOM的浏览器会将一个event对象传入到事件处理程序。

  let btn = document.getElementById("myBtn");
  btn.onclick = function(event){
    alert(event.type);//'click'
  };
  btn.addEventListener('click',function(event){
    alert(event.type);//'click'
  }.false);
  复制代码

• event对象包含与建立它的特定事件有关的属性和方法

  属性/方法	用法
  bubbles(Boolean)	代表事件是否冒泡
  cancelabel(Boolean)	代表是否能够取消事件的默认行为
  currentTarget(Element)	其事件处理程序当前正在处理事件的那个元素
  defaultPrevented(Boolean)	为true表示已经调用preventDefault()
  detail(Integer)	与事件相关的细节信息
  eventPhase(Integer)	调用事件处理程序的阶段：1表示捕获阶段，2表示“处于目标”，3表示冒泡阶段
  preventDefault()(Function)	取消事件的默认行为。若是cancelabel是true则可使用这个方法
  stopImmediatePropagation()(Function)	取消事件的进一步捕获或冒泡，同时阻止任何事件处理程序被调用
  stopPropagation()(Function)	取消事件的进一步捕获或冒泡。若是bubbles为true，则可使用这个方法
  target(Element)	事件的目标
  trusted(Boolean)	为true表示事件是浏览器生成，为false表示事件是由开发人员经过javascript建立的
  type(String)	被触发的事件类型
  view(AbstractView)	与事件关联的抽象视图。等同于发生事件的window对象

• 比较经常使用的属性和方法

  1）、事件处理内部，对象this始终等于currentTarget的值，而target则只包含事件的实际目标。

  2）、经过检测event.type属性，可让函数肯定发生了什么事件，并执行相应的操做。（如：click,mouseover,mouseout）

  3）、阻止特定事件的默认行为，能够用preventDefault方法。但须要注意的是，只有cancelabel属性设置为true的事件，才可使用preventDefault()来取消其默认行为。

  4）、stopPropagation()方法用于当即中止事件在DOM层次中的传播，即取消进一步的事件捕获或冒泡。（如：直接添加到一个按钮的事件处理程序能够调用stopPargation(),从而避免触发注册在document.body上面的事件处理程序）

备注： 只有在事件处理程序执行期间，event对象才会存在；一旦事件处理程序执行完成，event对象就会被销毁。

IE中的事件对象

• 有如下两种状况：

  第一种：在使用DOM0级方法添加事件处理程序时，event对象做为window对象的一个属性存在。

  let btn = document.getElementById("myBtn");
  btn.onclick = function(){
    let  event = window.event;
    alert(event.type);//'click'
  };
  复制代码

  第二种：若是事件处理程序是使用attachEvent()添加的，那么就会有一个event对象做为参数被传入事件处理程序函数中。在使用attachEvent()的状况下，也能够经过window对象来访问event对象

  let btn = document.getElementById('myBtn');
  btn.attachEvent("onclick",function(event){
    alert(event.type);//"click
  });
  复制代码

• IE的event对象一样也包含与建立它的事件相关的属性和方法

  属性/方法	用法
  canceBubble(Boolean)	默认为false，但将其设置为true就能够取消事件冒泡（与DOM中的stopPropagation()方法相同）
  returnValue(Boolean)	默认为true，但将其设置为false就能够取消事件的默认行为（与DOM中的preventDefault()方法相同）
  srcElement(Element)	事件的目标（与DOM中的traget属性相同）
  type(String)	被触发的事件的类型

跨浏览器的事件和对象的封装

把上面的EventUnit封装在js文件中，对该文件进行引用，就可使用里面的方法进行浏览器的兼容

let EventUnit = {
  addHandle: function(element, type, 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) {
    if (element.removeEventListener) {
      element.removeEventListener(type, handler, false);
    } else if (element.detachEvent) {
      element.detachEvent('on' + type, handler);
    } else {
      element['on' + type] = null;
    }
  },
  getEvent: function(event) {
    return event ? event : window.event;
  },
  getTarget: function(event) {
    return event.target || event.srcElement;
  },
  preventDefault: function(event) {
    if (event.preventDefault) {
      event.preventDefault();
    } else {
      event.returnValue = false;
    }
  },
  stopPropagation: function(event) {
    if (event.stopPropagation) {
      event.stopPropagation();
    } else {
      event.canceBubble = true;
    }
  }
};
复制代码

参考： 《Javascript高级程序设计》第3版的第13章：事件