语言
JavaScript
1. 浏览器事件有哪些过程?为什么一般在冒泡阶段,而不是在捕获阶段注册监听? addEventListener参数分别是什么?
解答: (1)DOM事件流分为三个阶段:捕获阶段、目标阶段、冒泡阶段。先调用捕获阶段的处理函数,其次调用目标阶段的处理函数,最后调用冒泡阶段的处理函数。(下面的图中没有标html标签)
- 捕获阶段:事件从window对象自上而下向目标节点传播的阶段;
- 目标阶段:真正的目标节点正在处理事件的阶段;
- 冒泡阶段:事件从目标节点自下而上向window对象传播的阶段。
(2)实现事件代理。事件绑在在冒泡阶段后,由于事件会在冒泡阶段向上传播到父节点,因此可以把子节点的监听函数定义在父节点上,由父节点的监听函数统一处理多个子元素的事件,避免子元素重复定义。事件的代理优点如下:
- 减少内存消耗,提高性能
- 动态绑定事件
(3)
el.addEventListener(event-name, callback, useCapture)
event-name: 事件名称,可以是标准的DOM事件 callback: 回调函数,当事件触发时,函数会被注入一个参数为当前的事件对象 event useCapture: 默认是false,代表事件句柄在冒泡阶段执行(或者说注册的是冒泡事件),true表示事件句柄在捕获阶段执行 (或者说注册的是捕获事件)