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

跨浏览器的事件处理程序

DOM0级处理事件

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

事件流: 冒泡阶段

使用:

1、为元素增加事件:

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

2、删除事件:

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

DOM2级事件处理程序

两个方法: addEventListener()removeEventListener()

三个参数: 处理事件名,事件处理程序,布尔值。(最后的布尔值为true,表示在捕获阶段调用事件处理程序;为false,表示在冒泡调用事件处理程序)

使用:

1、为元素增加事件:

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

2、删除事件:

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

注意:

1),addEventListener()添加的匿名函数将无法移除;

2),大多数情况下,都是将事件处理程序添加到事件流的冒泡阶段(即第三个参数为false);

3),如果添加了多个事件处理程序,会按照添加它们的顺序触发。

IE事件处理程序

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

两个参数: 事件处理程序名称,事件处理程序函数

事件流: 冒泡阶段

使用:

1、为元素增加事件:

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

2、删除事件:

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章:事件