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
