js 和html 之间的交互是通过事件实现的。

• 事件流：页面接收事件的顺序，

• dom事件流：事件捕获， 事件目标阶段， 事件冒泡（在此阶段接收事件）

• 事件：click 点击动作

• 事件处理程序：onclick

• 为事件指定事件处理程序的方式

一、事件处理程序

1.HTML事件处理程序：

<input type="text" onclick="alert('文本框')">

缺点：
1.时差，会导致报错
2.浏览器标识符解析不一样
3.耦合性太高

2.DOM0 级事件处理程序： 第四代web浏览器-至今，冒泡阶段处理

var  btn = docuemnt.getElementById("button");
btn.onclick = function(){
    alert("DOM0 级事件处理程序",this.id)
}
btn.onclick=null  // 删除事件处理程序

优点：
1.简单
2.跨浏览器

为了可以添加多个事件处理程序 ，出现了DOM2 + IE

3.DOM2 级事件处理程序：默认冒泡阶段处理，IE9,Firefox，safari，chrome，opera支持

addEventListener()
removeEventListener()
三个参数，第一个参数是click，第二个数函数， 第三个代表是否在冒泡阶段false
添加多个事件处理程序时候， 顺序触发

4.IE事件处理程序：IE和opera支持，冒泡阶段触发

attachEvent();
detachEvent();
两个参数， 第一个是onclick，第二个是函数
添加多个时候， 反顺序触发

注意：IE和DOM2事件处理程序 都对 匿名函数无法移除， 也就是要把函数单独摘出去

跨浏览器的事件处理程序 ：dom2 +IE+ dom0的情况加起来

二、事件处理对象

image.png

总结：

image.png

image.png

image.png

image.png