事件处理程序的调用


一旦注册了事件处理程序,浏览器就会在指定对象上发生指定类型事件时自动调用它。

事件处理程序的参数

通常调用事件处理程序时把事件对象作为一个参数,事件对象的属性提供了有关事件的详细信息。

在 IE8 及以前版本,通过设置属性注册事件处理程序,调用它们时并未传递事件对象,取而代之,需要通过全局对象 window.event 来获得事件对象:

function hander(event) {
    event = event || window.event;
}

事件处理程序的运行环境

通过设置属性或 addEventListener() 注册的事件处理程序作为对象方法来调用,在事件处理程序内部,this 对象指向事件目标,但是 attachEvent() 则不然,它们的 this 值是全局(Window)对象。

事件处理程序的作用域

这里需要注意的是通过 HTML 属性注册的事件处理程序,它们被转化为能存取全局变量的顶级函数而非任何本地变量。

事件处理程序的返回值

通过设置对象属性和HTML属性注册事件处理程序的返回值有时候是非常有意义的,通常情况下,返回值是 false 就是告诉浏览器不要执行这个事件相关的默认操作。比如表单提交按钮的 onclick 事件返回 false 可以阻止提交表单,文本输入框中的 onkeypress 事件返回 false 可以过滤键盘输入。

事件处理程序的返回值只对通过属性注册的处理程序才有意义,使用 addEventListener()attachEvent() 注册事件处理程序必须调用 preventDefault() 或设置事件对象的 returnValue 属性才能达到类似的效果。

调用顺序

  • 通过设置对象属性或HTML属性注册的事件处理程序优先调用
  • 使用 addEventListener() 注册的处理程序按照注册顺序调用
  • 使用 attachEvent() 注册的处理程序可能按照任何顺序调用

事件传播

调用在文档/文档元素上注册的事件处理函数后,大部分事件会「冒泡」到 DOM 树根。

事件冒泡是事件传播的第三个阶段,目标对象本身的事件处理程序调用是第二个阶段,第一个阶段甚至发生在目标处理程序调用之前,成为「捕获」阶段,也就是 addEventListener() 第三个参数所关注的,如果第三个参数设置为 true,那么事件处理程序被注册为捕获事件处理程序,它会在事件传播的第一个阶段调用。

注:事件传播的捕获阶段会调用在事件目标的父元素上的捕获事件处理程序,目标对象本身上注册的捕获事件处理程序不会被调用。因此,事件捕获提供了在事件没有送达目标之前查看它的机会,可用于程序调试、事件取消技术、鼠标拖放等。

事件取消

取消事件的浏览器默认行为有三种方式:

  • 通过属性注册的事件处理程序的返回值设置为 false
  • 在支持 addEventListener() 的浏览器中通过 preventDefault() 方法
  • attachEvent() 中通过设置 returnValue 属性为 false

以上只是事件取消的一种,我们还可以取消事件传播。在支持 addEventListener() 的浏览器中可以调用事件对象的 stopPropagation() 方法,IE9 之前的 IE 不支持该方法,不过,IE事件对象有一个 cancelBubble 属性,设置这个属性为 true 可以阻止事件进一步传播。


点赞 取消点赞 收藏 取消收藏

<< 上一篇: 注册事件处理程序

>> 下一篇: 文档加载事件