事件的三要素：操作什么对象（元素对象），操作的类型（点击，移除，移入等），怎么操作（函数）
1、事件流：描述的是从页面中接受事件的顺序
IE：事件冒泡流
即事件最开始由最具体的元素接收，然后逐级向上传播至最不具体的那个节点
N：事件捕获流
不太具体的节点应该更早接收到事件，而具体的节点反而更晚接收到事件
2、事件处理程序
1）HTML事件处理程序：把事件直接添加到HTML结构中，缺点是js代码和html代码耦合在一起，不符合前端开发规范
2)DOM0级事件处理程序：较为传统的方式，把一个函数赋值给一个事件处理程序属性，优点在于简单，兼容跨浏览器,用的比较多;可以给一个对象添加多个事件
btn.onclick=function(){};
删除事件：btn.onclick=null;
3）DOM2级事件处理程序：
定义了2个方法，用于处理指定和删除事件处理程序的操作
addEventListener() 和removeEventListener()
接收3个参数：要处理的事件名，作为处理程序的函数和布尔值（true表示捕获事件，false表示在冒泡中处理）
对象.addEventListener("click",函数名,false); 注意：没有on ,函数名没有（）
删除事件：用removeEventListener(),所接收的参数要一样
特点：可以给一个对象添加多个事件，按顺序执行
3、IE事件处理程序（IE 和 opera）
attachEvent() 添加事件
detachEvent() 删除事件
接收相同的2个参数：事件处理程序的名称和事件处理程序的函数
btn.attachEvent("onclick",函数名) 注意：onclick需要加上on
4、跨浏览器的事件处理程序：需要把事件处理程序封装到一个对象里，然后再调用这个对象的方法来实现
再封装的时候需要做能力的检测，支持DOM0级的，支持DOM2级的，支持IE事件处理程序的
封装代码：
var eventObJ = {
addHandler: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
removeHandler: function (element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
}
}
5、DOM中的事件对象：在触发DOM上的事件时都会产生一个对象，叫做事件对象event
event事件对象中常用的方法和属性
备注：IE8前的event通过window.event来引用
1）type:用于获取事件类型（click,mouseout）
2) target:目标，用于获取这个事件用于什么对象
3）stopProPagation() :阻止世界冒泡，语法：event.stopPropagation()
4）preventDefault() 用于阻止事件的默认行为，比如组织a标签默认的跳转行为。语法：event.preventDefault()
6、IE中的事件对象
1）type：用于获取事件类型（click,mouseout）
2）srcElement：目标，用于获取这个事件用于什么对象
3）cancelBubble: 用于阻止事件冒泡，true为阻止冒泡，false为不阻止冒泡
4）returnValue： 值是false，表示阻止事件默认行为
7、事件的类型：鼠标事件，
网友评论