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

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

冒泡事件流（子父） 捕获事件流（父子）

6.5事件冒泡与捕获

6.5事件冒泡与捕获

事件冒泡

事件捕获

三、取消默认动作

事件对象的cancelable值为true时，调用事件对象的preventDefault()方法，可以取消事件的默认行为。

如：提交按钮的单击操作会导致自动提交表单，超链接的自动跳转动作。

四、阻断事件流

事件对象的bubbles值为true时（冒泡），调用事件对象stopPropagation()方法，可以取消事件的进一步捕获或冒泡。

6.5事件冒泡与捕获

本章主要介绍了JavaScript事件处理，如窗口事件、鼠标事件、键盘事件，补充介绍了事件流，要求理解事件冒泡和捕获，以及的事件流阻断的方法，取消事件默认响应动作的方法，这些知识和技能，是掌握基于事件驱动的交互式设计的重要基础。

6.6本章小结