A-A+

《javascript高级程序设计》第13章 事件(一)

2016年08月25日 JavaScript 暂无评论

事件:文档或浏览器窗口中发生的一些特定的交互瞬间。可用侦听器来预订事件,以便事件发生时执行相关的代码,在传统软件工程中被称为观察员模式的模型。

13.1事件流

事件流描述的是从页面接收事件的顺序。

事件冒泡(IE)

事件开始由具体的元素接收(文档中嵌套层次最深的节点),然后逐级向上传播到较为不具体的节点(文档)。所有现代浏览器均支持。一直冒泡到window对象。

13.1.2 事件捕获

不太具体的节点应早收到事件,最具体的节点应该最后收到。事件捕获的用意:在事件达到预定目标之前捕获它。(特殊需要时再使用)

13.1.3 DOM事件流

DOM2级事件 规定的事件流包括三个阶段:事件捕获、处于目标、事件冒泡

有两个机会在目标对象上面操作事件。规定捕获阶段不涉及事件目标,但浏览器均会。

13.2 事件处理程序

响应某个事件的函数就叫事件处理程序。事件侦听器。事件处理程序名字以on开头。

13.2.1 HTML事件处理程序

某个元素支持的每种事件,都可以用一个相应事件处理程序同名的html特性来指定。这个特性的值,是应该可以执行的javascript代码。

事件处理程序中的代码在运行时,可访问全局作用域中的任何代码。

HTML 中指定事件处理程序的缺点 :

1,时差问题。办法:封装在try-catch语句中。

2,作用域链。js引擎解析。可能会在访问非限定对象成员时出错。

3,代码耦合。

 

13.2.2 DOM0 级事件处理程序

js 代码与html代码的顺序。使用 DOM0 级方法指定的事件处理程序被认为是元素的方法。这时候的事件处理程序是在元素的作用域中运行, 程序中的 this 引用当前元素 。

 

13.2.3 DOM2 级事件处理程序

定义了两个方法: addEventListener() 、removeEventListener()。

参数:要处理的事件名,作为事件处理程序 的函数,一个布尔值

true,则在捕获阶段调用事件处理程序,false则冒泡阶段处理。

好处:可添加多个事件处理程序。

通过 addEventListener()添加的事件处理程序只能使用 removeEventListener()来移除;移除时传入的参数与添加处理程序时使用的参数相同。通过 addEventListener()添加的匿名函数将无法移除。 attachEvent()也是如此。

不建议在事件捕获阶段注册事件处理程序.

 

13.2.4 IE事件处理程序

attachEvent()detachEvent()

参数:事件处理程序名称,事件处理程序函数。

IE8 及更早版本只支持事件冒泡,故通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段。

在 IE 中使用 attachEvent()与使用 DOM0 级方法的主要区别在于事件处理程序的作用域。在使用 DOM0 级方法的情况下,事件处理程序会在其所属元素的作用域内运行;在使用 attachEvent()方法的情况下,事件处理程序会在全局作用域中运行,因此 this 等于 window。

IE多个事件处理程序不是以添加它们的顺序执行,而是以相反的顺序被触发。

 

13.2.5 跨浏览器的事件处理程序

 

13.3 事件对象

在触发 DOM 上的某个事件时,会产生一个事件对象 event,这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。

13.3.1 DOM中的事件对象

兼容 DOM 的浏览器会将一个 event 对象传入到事件处理程序中。在通过 HTML 特性指定事件处理程序时,变量 event 中保存着 event 对象。

event 对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样,可用的属性和方法也不一样。

preventDefault()阻止特定事件的默认行为、 target 、 currentTarget 事件处理程序当前正在处理事件的那个元素

stopPropagation()方法用于立即停止事件在 DOM 层次中的传播。

eventPhase 属性,用来确定事件当前正位于事件流的哪个阶段:捕获阶段:1,处于目标对象,2,冒泡3.

只有在事件处理程序执行期间, event 对象才会存在,执行完毕,则销毁。

 

13.3.2 IE中的事件对象

要访问 IE 中的 event 对象有几种不同的方式,取决于指定事件处理程序的方法。

 

13.3.3 跨浏览器的事件对象

 

 

 

标签: