JavaScript事件模型

JavaScript和HTML之间的交互是通过事件来实现的。

JavaScript事件模型主要有三种：DMO0级事件处理程序（原始事件模型）、DMO2级事件处理程序、IE事件处理程序。

1.DMO0级事件处理程序（原始事件模型）

特点：

①简单；

②具有跨浏览器的优势；

③this：当前元素（使用DOM0级方法指定的事件处理程序被认为是元素的方法，事件处理程序是在元素的作用域中运行）;

④一个DOM对象只能注册一个类型的事件，如果注册了两个，则会发生覆盖，只执行后一个事件；

代码：

①添加事件

var btn = document.getElementById("myBtn");
btn.onclick = function(){
    console.log(this.id);//"myBtn"
}
复制代码

②删除事件

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

2.DMO2级事件处理程序

特点：

①一个DOM对象可以注册多个事件处理程序，会依次触发；

②addEventListener()、removeEventListener()均接受三个参数：要处理的事件名、作为事件处理程序的函数、一个布尔值；而布尔值若为true，则代表在捕获阶段调用事件处理程序，为false，则代表在冒泡阶段调用事件处理程序。

代码：

①添加事件

var btn = document.getElementById("myBtn");
btn.addEventListener("click",function(){
    console.log(this.id);//"myBtn"
},false)

btn.addEventListener("click",function(){
    console.log('Hello!');//"myBtn"
},false)
复制代码

②删除事件

var btn = document.getElementById("myBtn");
btn.removeEventListener("click",function(){
    console.log(this.id);//没用。。。。
},false)
复制代码

正确的：

var btn = document.getElementById("myBtn");
var hander = function(){
console.log(this.id);
}
btn.addEventListener("click",hander,false);

btn.removeEventListener("click",hander,false);
复制代码

3.IE事件处理程序

特点：

①一个对象可以注册多个事件处理程序，但并非依次触发，而是相反顺序被触发(与DOM方法不同)；

②this：window对象（与DOM0级方法中有所区别）;

代码：

①添加事件

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick",function(){//注意第一个参数为 onclick
    console.log('Click!');
});
btn.attachEvent("onclick",function(){//注意第一个参数为 onclick
    console.log('Hello!');
});

//先 "Hello!" 再"Click!"
复制代码