第06章_JavaScript事件处理-第07讲-事件冒泡与捕获.pptxVIP

JavaScript程序设计

主讲：王奇志

第06章JavaScript事件处理

事件介绍

窗口事件

鼠标事件

键盘事件

事件冒泡与捕获

本章小结

6.5事件冒泡与捕获

一、事件流

6.5事件冒泡与捕获

HTML

BODY

DIV

事件流的三个阶段，通过enent.eventPhase值标识（按顺序）：

捕获阶段：标识值为1，此阶段为截获事件提供了机会

目标阶段：标识值为2，实际的目标接收到事件

冒泡阶段：标识值为3，这个阶段对事件做出响应

6.5事件冒泡与捕获

DOM结构是一个树形层次结构，当一个HTML元素产生一个事件时，该事件会在元素节点与根节点之间按特定顺序传播，路径所经过的节点都会收到该事件，这个传播过程称为DOM事件流。

二、事件冒泡与事件捕获

1、事件冒泡：某个元素从叶子节点沿着祖先节点一直向上传递到根节点，子元素先触发，父元素后触发；以冒泡方式触发的事件绑定：

addEventListener(“click”,“doSomething”,“false);//默认

2、事件捕获：从DOM树最顶层元素逐级向下叶子节点处传递，父元素先触发，子元素后触发；以捕获方式触发的事件绑定：

addEventListener(“click”,“doSomething”,“true);

捕获事件流（父子）

6.5事件冒泡与捕获

DOM是树形层次结构，