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

小婉
1,173 阅读5分钟

跨浏览器的事件处理程序

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

avatar
文章
阅读
粉丝