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!"复制代码