Javscript事件阶段:在添加事件监听时冒泡与捕获阶段的不同

160 阅读1分钟

Q:描述下js里面的事件流。
A:DOM2级事件模型中规定了事件流的三个阶段:捕获阶段、目标阶段、冒泡阶段,低版本IE(IE8及以下版本)不支持捕获阶段。
捕获事件流:Netscape提出的事件流,即事件由页面元素接收,逐级向下,传播到最具体的元素。
冒泡流事件:IE提出的事件流,即事件由最具体的元素接收,逐级向上,传播到页面。

定义和用法
addEventListener()方法用于向指定元素添加事件句柄。
使用removeEventListener()方法来移除addEventListener()方法添加的事件句柄。
语法:
element.addEventListener(event,function,useCapture)
参数值:
event: 必须。字符串,指定事件名。

注意:不要使用"on"前缀。例如,使用"click",而不是使用"onclick"。

function: 必须。指定要事件触发时的函数。

当事件对象会作为第一个参数传入函数。事件对象的类型取决于特定的事件。例如,"click"事件属于MouseEvent(鼠标事件)对象。
useCapture:

可选。布尔值,指定事件是否在捕获或冒泡阶段执行。
可能值:

  • true - 事件句柄在捕获阶段执行
  • false - 默认值。事件句柄在冒泡阶段执行