事件的三要素：操作什么对象（元素对象），操作的类型（点击，移除，移入等），怎么操作（函数）

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、事件的类型：鼠标事件，