DOM事件和事件委托

272 阅读2分钟

事件

事件是您在编程时系统内发生的动作或者发生的事情,系统响应事件后,如果需要,您可以某种方式对事件做出回应。JS事件列表

事件监听器

每个可用的事件都会有一个事件处理器,也就是事件触发时会运行的代码块。当我们定义了一个用来回应事件被激发的代码块的时候,我们说我们注册了一个事件处理器,事件处理器有时候被叫做事件监听器。

事件调用顺序

IE5使用从内向外的事件调用顺序;网景使用从外向内的事件调用顺序。2002年3W3C发布标准,规定浏览器应该同时支持两种调用顺序。先由外向内查看是否有函数监听,再由内向外查看是否有函数监听。

事件捕获与事件冒泡

从外向内查找监听函数即为事件捕获;从内向外查找监听函数即为事件冒泡。开发者可以自己选择将监听函数放在捕获阶段还是冒泡阶段。

事件绑定API

W3C标准中事件绑定API如下:

dom.addEventListener('click', fn, bool)

如果bool不传或为falsy值则fn走冒泡,即浏览器在冒泡阶段发现dom有fn监听函数,调用fn并提供事件信息; 如果bool为true则fn走捕获,即当浏览器在捕获阶段发现dom有fn监听函数,调用fn并提供事件信息。

target与currentTarget

e.target为用户已操作的元素;e.currentTarget为程序员监听的元素(this是e.currentTarget)。

取消冒泡

捕获不可取消,冒泡可以取消。使用e.stopPropagation()可以中断冒泡。

事件委托

事件委托是指将一个元素A的事件监听器绑定到另一个元素B上,一般是外层元素(例如父元素)。利用事件调用顺序中的冒泡原理当用户与元素A发生事件监听器相应的事件时,事件B将会触发该事件的函数。使用事件委托可以监听多个元素是否有某一个事件,也可以监听动态元素。原理就是监听祖先元素,判断交互元素是否是要监听的元素。