jQuery学习---------认识事件处理

3种事件模型：

原始事件模型
DOM事件模型
IE事件模型

原始事件模型（0级事件模型）
1、事件处理程序被定义为函数实例，然后绑定到DOM元素事件对象上，实现事件的注册。

例子：var btn = document.getElementsByTagName("input")[0];
btn.onclick = function(){
函数体....
}
2、也可以把特定的事件处理函数的函数体直接赋给DOM元素的事件属性

例子：<input type="button" onclick="alert('hello')"

0级事件模型的优缺点：
优点：使用方便
缺点：元素属性被用来存储事件处理函数的引用，
所以每个元素的每个事件只能注册一个事件处理程序。

DOM事件模型：
1、注册事件
addEventListener(）方法：
语法：addEventListener("type",function,useCapture)
参数：type：是要绑定的事件类型，但是这里没有“on”前缀。
如onclick事件应写作：click
function：事件处理函数，自带一个默认参数，引用event对象
usrCapture：是一个布尔值，
为true时：在事件传播的捕捉阶段触发响应；
为false时：在事件传播的冒泡阶段触发响应

例子：var btn = document.getElementsByTagName("input")[0];
btn.addEventListener("click",function(){
btn.value = event.type;
},true)

2、事件传播
DOM 2级事件模型中，一旦事件被触发，事件流首先从DOM树的顶部（文档节点#document）向下传播，直到目标节点，然后再从目标节点向上传播到DOM树顶。
从上到下的过程被称为捕获阶段，
从下到上的过程被称为冒泡阶段。
终止事件流的冒泡：stopPropagegation()方法

例子：var btn = document.getElementsByTagName("input")[0];
do{
btn.addEventListener("click",function(){
div.innerHTML += " "+this.nodeName+" ";
},true)
btn = btn.parentNode;
}while(btn);

上例中，第三个参数设置为true，注册的是捕获型事件。
所以点击按钮，事件触发顺序为：#document->html->body->button
如果，第三个参数设置为false，注册的是冒泡型事件。
所以点击按钮，事件的触发顺序为：button->body->html->#document

3、销毁事件
removeEventListener()方法：
注意：removeEventListener（）和addEventListener()的第三个参数要保持一致
否则销毁操作是无效的。

IE事件模型：
1、注册事件：
attachEvent()方法：
语法：attachEvent("type",function)
参数：type：元素事件类型，如：onclick
function：事件处理函数
注意：IE时间模型中，事件处理函数中的this指针总是指向window对象，

0型事件模型中，事件处理函数中的this指针总是指向当前注册事件的对象
2、事件传播：
IE事件模型：事件流总是从目标对象向上传递知道树顶，即冒泡型。
终止事件流的冒泡：设置event对象的cancelBubble属性

3、注销事件：
detachEvent()方法

事件处理机制：
Event对象：
当触发事件时，浏览器会自动创建一个event对象，
event对象实际上是Event类型的实例，
默认状态下他会被作为参数传递给事件处理函数

实现访问的兼容性：
var event = event||window.event；

注意：IE和DOM标准浏览器返回的event对象的属性和方法存在差异！！！