jQuery事件模型

目录

• 特征
• 零级事件模型
• 事件模型中的event对象
• 冒泡
• 事件流控制和默认事件动作
• 二级dom标准事件模型
  • 注册事件
  • 传播事件
  • 销毁事件

特征

• 统一了事件处理中的各种方法
• 允许在每个元素上为每个事件类型简历多个处理程序
• 采用 2 级事件模型中 标准的事件类型名称
• 统一了 Event 对象的传递方法，并对Event对象的常用属性和方法进行规范
• 为事件管理和操作提供统一的方法

考虑到IE浏览器不支持事件流中的捕获型阶段，而且开发者很少使用此阶段，所以jQuery事件模型也没有支持事件流中的捕获型阶段。
除了这一点区别外，jQuery事件模型的功能 和 2级事件模型基本相似。

零级事件模型

由于是在 Navigator 浏览器中最早引入事件驱动模型的，因此人们习惯叫它 0 级事件模型。所有现代浏览器都支持这种模型。

在 0 级事件模型中，事件处理程序 先 被定义为函数实例，然后，绑定到 DOM 元素的事件属性上面，从而实现事件注册。
eg:

var btn = document.getElementByTagName("input")[0];
btn.onclick = funciton(){        // 绑定事件处理函数，为按就注册鼠标单击事件
    alert(this.nodeName);
}


<input type="button" value="0 级事件模型">

上面也可以这样写:

<input type="button" onclick="alert(this.nodeName);" value="0 级事件模型" />

事件模型中的event对象

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

IE浏览器特例，它把 Event 视为独立的对象。通过Window对象的event属性进行访问。

so，为了兼容：
var event = event || window.event; // 兼容不同类型浏览器的访问 Event 对象方法

Event对象有属性和方法。利用这些可以动态存储当前事件的相关信息。（响应时间的类型、按下鼠标键、按下键盘键、光标指针等）

var btn = document.getElementByTagName("input")[0];
btn.onclick = function(event){    // 绑定鼠标事件处理函数
    var event = event || window.event;
    btn.value = event.type;    //获取当前事件类型
}


<input type="button" value="Event 对象" />

注意：IE 和 DOM 标准浏览器虽然都是使用同名的 Event 来存储时间的动态信息，BUT，是有差异的！
eg：
记录当前事件作用的元素
{
IE : srcElement,
DOM标准浏览器 : target
}

button属性 // 返回鼠标左、右、中键
{
IE : 返回1、2、4, // 我在想，为啥是4 不是3 呀？你们谁知道？
DOM标准浏览器 : 返回0、2、1
}

冒泡

[后面补充]

• IE 5.5 及以下： div -> body -> document
• IE 6.0 及以上： div -> body -> html -> document
• Mozilla 1.0及以上： div -> body -> html -> document -> window

事件流控制和默认事件动作

（就是jq中的事件冒泡 & 默认事件）

阻止事件冒泡
{
DOM标准浏览器 : stopPropagation() // event.stopPropagation()
IE ：cancelBubble // window.event.cancelBubble = true;
}

另外， 在事件处理函数（如onclick）中返回false就可以取消事件的默认动作（阻止默认事件）
eg:

var a = document.getElementsByTagName("a")[0];
a.onclick = function(){
    return false;
}

<a href="https://github.com/sameenzm">sameen's github</a>

• JavaScript中Event.returnValue属性

该属性是设置或获取事件的返回值。Event对象的returnValue属性的值一般是true,即脚本处理完自己的工作后由元素处理事件。
通过该属性可以取消事件处理程序中调用函数的默认操作。

二级dom标准事件模型

0 级事件模型使用起来虽然方便，but，存在fatal的缺陷：元素属性被用来存储事件处理函数的引用。so，每个元素对于任何特定的事件类型，only注册一个事件处理程序。。

IE不能完全支持 2 级事件模型，only支持一些基本功能模块。

注册事件

addEventListener(type, function, useCapture);
IE: attachEvent(type, function);

// 注意第一个参数的区别

addEventListener("click", function, false);        
**IE** : attachEvent("onclick", function);

注意：attachEvent()方法注册事件时，在事件处理函数中的this指针总是指向window对象。
but，在 0 级事件模型中，事件处理函数中的this指针总是指向当前注册事件的对象。在 2 级事件模型中,addEventListener()方法中的this指向触发当前事件的对象。

事件传播

在 2 级事件模型中，一旦事件被触发，事件流首先从 DOM Tree顶部向下传播直到目标节点，然后，再从目标节点向上传播到 DOM Tree 顶。（从上到下：捕获；从下到上：冒泡）
addEventListener()的第三个参数就可以设置。
addEventListener(type, function, useCapture) //useCapture : ture - 在捕获阶段触发响应。 false - 在冒泡阶段触发响应

IE:
window.event.cancelBubble = true;

销毁事件

removeEventListener(type,function,useCapture) //也是三个参数，第三个参数要和addEventListener的第三个参数保持一致，才能正确删除事件处理函数，节省系统资源

IE:
detachEvent(type,function);

那么jQuery事件处理机制能帮我们处理那些问题？

1、毋容置疑首先要解决浏览器事件兼容问题
2、可以在一个事件类型上添加多个事件处理函数，可以一次添加多个事件类型的事件处理函数
3、提供了常用事件的便捷方法
4、支持自定义事件
5、扩展了组合事件
6、提供了统一的事件封装、绑定、执行、销毁机制
7、……

参考：
Aaron