【jQuery学习笔记-----Window事件模型】

事件

事件模型（即所谓的事件驱动模式或方式）是面向对象程序设计的一个核心概念，它以消息为基础，以事件来驱动（Message based，Event driven）。当文档发生了特定事件时，浏览器会自动生成一个事件对象，以响应该事件，并执行对应的javascript脚本。

 

0级事件模型

由于历史久远，所有浏览器都支持这种模型。

如

var btn =document.getElementByTagName(“input”)[0];

btn.onclick =function(){

     alert(this.nodeName);

}

0级事件模型允许把特定的事件处理函数的函数体直接赋值给DOM元素的HTML特性，从而简化事件注册和程序。

如：

<input type=”button”οnclick=”alert(this.nodeName);” value=”” />

事件模型中的Event对象

浏览器在事件被触发时，会自动创建一个Event对象，Event对象实际上是Event类型的实例，在默认状态下它会被作为参数传递给事件处理函数。不过IE浏览器把Event视为独立的对象，通过Window对象的event属性进行访问。为了能够兼容IE与非IE浏览器共享Event对象，我们可以使用如下代码进行兼容。

varevent=event||window.event; //兼容不同类型的浏览器的访问Event对象方法

Event对象包含了属性和方法，利用这些属性可以动态存储与当前事件相关信息，如响应事件的类型、按下的鼠标键、按下的键盘键和光标指针的位置等。

 

事件模型中的冒泡现象

在DOM文档结构中，每个元素并非都孤立的存在，上下级元素之间必须存在嵌套关系，这就给web事件处理带来很多麻烦。当触发DOM树上某个元素的事件时，浏览器的事件处理机制会检查在那个元素上是否已经建立了特定的事件处理程序。如果是，则调用该事件处理程序，但是事情远远没有结束。

在目标元素获取机会处理事件之后，事件模型会检查目标元素的父元素，检测父元素是否也注册了同类型的事件，如果是，还要调用父元素的事件处理程序。在这之后，事件模型还会继续检测上一级元素，以引此逐层检索，持续不直到DOM树的顶部。这个事件检测的过程如同水中向上传播的气泡，故有人形象地把这个事件处理过程称之为事件冒泡。

实际上事件冒泡仅是事件流的一种类型，另外还有捕获型事件流，事件流一般要以分为三个阶段：捕捉阶段、目标阶段、冒泡阶段。标准事件流一般都会包括这三个阶段。

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

不管是什么类型的浏览器，都会为Event对象预定操纵事件流的方法。

标准的Event 对象的stopPropagation()方法

IE的cancelBubble属性设置为true

 一些事件往往被预设了特定的动作，也就是说它包含特定的语义。例如当单击a元素时会自动进行导航：而单击提交按钮时，会自动提交表单；单击重置按钮时，会自动清除表单域的输入值。如果要控制这些特定的动作，我们可以在这些事件处理函数中返回false即可，从而取消事件的默认动作。

2级DOM标准事件模型

0事件模型使用起来虽然很方便，但是存在致命的缺陷：元素属性被用来存储事件处理函数的引用。所以每个元素对于任何特定事件类型。每次只能够注册一个事件处理程序。如果独立管理事件流会显得非常笨拙。W3C在DOM2.0版本中正式制订了标准化的事件模型得到了所有现代主浏览器的支持。但IE(无语)还不能够完全支持，仅能支持2级事件模型中的基本模块功能。

1注册事件

2级事件模型为DOM中的Element类型元素定义了addEventListener()方法，使用这个方法注册事件，而放弃使用0级事件模型中为元素的事件属性指定事件处理函数的方法

addEventListener(type,function,useCapture);

2事件传播

在2级事件模型中，一旦事件被触发，事件流首先从DOM树顶（文档节点）向下传播，直到目标节点，然后再从目标节点向上传播到DOM树顶。从上到下的过程被称为捕获阶段，人下到上的过程被称为冒泡阶段。

3销毁事件

2级事件模型还为DOM中的Element类型元素定义了removeEventListener()方法，通过这个方法可以随时销毁已经注册的事件，以节省系统资源。

IE事件模型

IE7及其以下版本浏览器都不支持DOM标准的2级事件模型，而在IE8版本中才开始支持，不过IE浏览器从早期版本开始就提供一套与2级事件模型非常相似的模型，虽然用法略有区别，但功能基本相同

1注册事件

attachEvent(type,function)

当使用attachEvent方法注册事件时，在事件处理函数中的this指针总是指向window对象；但是在0级事件模型中，事件处理函数中的this指针总是指向当前注册事件的对象；而在DOM2级事件模型中，addEventListener()方法中的this都会指向触发当前事件的对象。为了解决attachEvent()方法无法定位当前事件对象的问题，可以通过返回闭包函数的形式，在attachEvent()方法中的第二个参数中直接调用函数，而不是引用函数，然后通过返回闭包函数以实现传递事件处理函数，这样在调用函数时，把当前事件对象传递给闭包函数，从而锁定事件对象

如： btn.attachEvent(“onclick”，(function(btn){return function(){p.innerHTML+=”<br />”+btn.nodeName;}})(btn)

 

2事件传播

IE事件模型不支持事件流中的捕获阶段，但是支持冒泡型事件传播方式。也就是说，在IE浏览器中，事件流总是从目标对象向上逐层传递到DOM树顶。

IE的事件冒泡传播与2级事件模型是相同的，但是它们中止冒泡的方式不同。

2级事件模型是通过stopPropagation()方法可以中止事件流冒泡，而IE事件模型设计通过Event对象的cancelBubble属性来控制，如果要中止事件流冒泡

3注册事件

IE浏览器支持使用detachEvent()方法注销事件，