跨浏览器事件处理

事件处理程序

事件就是用户或者浏览器要进行的某些动作，例如click、mouseover、load等。

事件处理程序就是响应某个事件（动作）的函数。

click的事件处理程序：onclick 

目录

事件处理程序

1.HTML事件处理程序

2.DOM0级事件处理程序

3.DOM2级事件处理

4.IE事件处理

跨浏览器的事件处理

性能优化 

事件对象

IE中的事件对象 window.event 

DOM中事件对象 event

完整的跨浏览器事件处理程序

---

下面每个的介绍一下：

• 1.HTML事件处理程序

优点：简单

缺点：（1）时差问题，用户可能会在HTML元素一出现就触发相应的事件，但事件处理程序可能不太满足；（2）扩展的作用域在不同的浏览器有不同的呈现效果；（3）HTML代码和Javasript代码存在紧耦合，修改时需要两个文件都改。

<input type="button" name="" value="Click me" onclick="showMessage()">

function showMessage(){
alert('HTML事件处理');
}

函数showMessage()既可以访问函数内部的变量，还可以访问元素本身的成员。

如果当前元素为表单，还可以访问到表单元素的入口，即可以访问其他表单的字段

• 2.DOM0级事件处理程序

优点：简单、跨浏览器

//DOM0级事件处理程序:将事件处理属性的值设置为函数
  var btndiv = document.getElementById('myBtn');
  btndiv.onclick = function(){
    btndiv.appendChild(document.createTextNode('DOM0事件处理'));
  }
  btndiv.onclick = null;

• 3.DOM2级事件处理

优点：可以同时指定多个事件处理程序

缺点：IE8及以下不可以

使用范围：IE9、Firefox、Safari、Chrome、Opera

注意：/要删除addEventListener添加的事件处理程序，必须使用removeEventListener，三个参数必须相同
处理函数为匿名函数不可以，因为两个匿名函数是完全不同的。

//DOM2级事件处理程序：addEventListener
  var btndivD2 = document.g