知识补全の事件处理程序

[AngellinaZ]

事件处理程序

html事件处理程序

<input type="button" value="click me" onclick="alert("hello")" />

缺点

1. 存在一个时间差, 当用户在html元素一出现在页面上就去触发相应的事件时，事件的处理程序可能还不具备执行条件
2. html和js代码耦合度太高, 改一动二 (html和js)

DMO0级事件处理程序

var btn = document.getElementById("myBtn");
btn.onclick = function () { alert(this.id) }

注意

1. 先html, 后js
2. 元素的方法，事件处理程序可以通过this访问元素的任何属性和方法。
3. 删除 btn.onclick =null

DOM2级事件处理程序

• addEventListener('click', function () {}, Boolean)
• removeEventListner('click', function () {}, Boolean)

最后的布尔值参数如果为ture,表示在捕获阶段处理程序，如果为false，表示在冒泡阶段调用事件处理程序。

var btn=document.getElementById("myBtn");
btn.addEventListner("onclick",function(){alert("hello world");false}); 
//这里添加的事件处理程序也是依附于元素的的作用域

优点

1. 可以为同一个元素添加多个事件处理程序。
2. 移除时使用的参数与添加事件处理程序的参数相同。
3. 通过addEventListner添加的匿名函数无法删除。

IE事件处理程序

• attachEvent('onclick', fun)
• detachEvent('onclick', fun)

var btn=document.getElementById("myBtn");
btn.attachEvent("onclick",function(){alert("hello world");});

特点

1. 由于IE只支持事件冒泡，所以通过attachEvent添加的事件处理程序都会添加到冒泡阶段。
2. IE在使用attachEvent方法的情况下，事件处理程序的作用域为全局作用域，因此this等于window。
3. 用来为一个元素添加多个事件处理程序， 事件的处理程序是按逆序触发

跨浏览器的事件处理程序 -- 用于处理跨浏览器的兼容性问题

创建的方法是addHandler,它的职责是视情况判定使用DOM0级方法，DOM2级方法，IE方法来添加事件。

addHandler接收3个参数：要操作的元素、事件名称、事件处理程序函数。

这个方法属于一个名叫EventUtil的对象, 使用这个对象来处理浏览器之间的差异。

var EventUtil = {
  addHandler: function(oElement, sEvent, fnHandler) {
    oElement.addEventListener ? oElement.addEventListener(sEvent, fnHandler, false) : oElement.attachEvent("on" + sEvent, fnHandler)
  },
  removeHandler: function(oElement, sEvent, fnHandler) {
    oElement.removeEventListener ? oElement.removeEventListener(sEvent, fnHandler, false) : oElement.detachEvent("on" + sEvent, fnHandler)
  },
  addLoadHandler: function(fnHandler) {
    this.addHandler(window, "load", fnHandler)
  }
};