事件流描述的是从页面中接受事件的顺序。IE的事件流是事件冒泡流;而Netscape Communicator的事件流是事件捕获流。
IE的事件流叫做事件冒泡流:即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播较为不具体的节点(文档)。
事件捕获流:其思想是不太具体的节点应该最早接收到事件,而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。
==>主推使用事件冒泡!
DOM事件流:分为三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。
首先发生的是事件捕获,为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段,可以在这个阶段对事件作出响应。
事件处理程序的名字以“on”开头,因此click事件的事件处理程序就是onclick,load事件的事件处理程序就是onload。
->为事件指定处理程序的方式:
●HTML事件处理程序
●DOM0级事件处理程序
●DOM2级事件处理程序
●IE事件处理程序
●跨浏览器的事件处理程序
●HTML事件处理程序:
注:这个操作是通过指定oclick特性并将一些JavaScript代码作为它的只来定义的。因此不能在其中使用未经转义的HTML语法字符。
这种定义方式具有独到之处:1.这样会创建一个封装着元素属性值的函数;2.扩展作用域。
●DOM0级事件处理程序:
注意:在这些代码运行之前不会指定时间处理程序,即上述代码如果位于按钮后面,就有可能一段时间单击没反应。
使用DOM0级方法指定的事件处理程序被认为是元素的方法。如上述中的this引用当前元素。(以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理)
●DOM2级事件处理程序:
addEventListener()和removeEventListener()两者都接受3个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值(如果布尔值是true,表示在捕获阶段调用事件处理程序;如果是false,则表示在冒泡阶段调用事件处理程序)。==》不是特别需要,我们不建议在事件捕获阶段注册事件处理程序。
注:这里添加的事件处理程序也是在其依附的元素的作用域中运行。其主要好处是可以添加多个事件处理程序,且这些处理程序按顺序执行。
通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除;移除时传入的参数与添加处理程序使用的参数相同。
注:如果addEventlistener()添加的是匿名函数将无法移除。
●IE事件处理程序
attachEvent()和detachEvent()其方法作用类似于上述addEventListener()和removeEventListener() ,其主要用于IE8及更早版本的浏览器下。
==>主要区别:1.attachEvent()和detachEvent()接受的参数为两个 2.它们的事件处理程序会在全局作用域中运行,因此this等于window 3.通过attachEvent()添加多个方法时,其响应顺序则是相反方向。
●跨浏览器的事件处理程序
其目的是为了解决上述存在的兼容问题。
定义一个EventUtil对象:
使用它: