从零开始学 Web之DOM（七）事件冒泡

大家好，这里是「从零开始学 Web 系列教程」，并在以下地址同步更新......

github：https://github.com/Daotin/Web

CSDN：https://blog.csdn.net/lvonve/

博客园：http://www.cnblogs.com/lvonve/

在这里我会从 Web 前端零基础开始，一步步学习 Web 相关知识，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！

一、事件冒泡

1、什么是事件冒泡？

事件冒泡：当有多个元素嵌套，并且这些元素绑定了相同的事件，这时候如果里面的元素事件触发了，那么外面的事件会自动触发。

示例：

2、阻止事件冒泡

2.1、方式一

注意： Chrome,IE8 支持，firefox 不支持

2.2、方式二

在事件处理函数中传一个参数 e，然后调用

注意：Chrome,firefox 支持， IE8 不支持。

window.event 和 e 都是事件处理参数对象，一个是 IE 标准，一个是 firefox 标准。

这时候可以写兼容代码的，由于用到 window ，但是没学到 BOM，所以先不写。

3、事件的三个阶段

事件捕获阶段（从外向内） ===> 阶段 1

事件目标阶段（最开始触发事件的目标）===> 阶段 2

事件冒泡阶段（从里向外） ===> 阶段 3

通过事件处理参数对象 属性可以查看当前事件所处的阶段。

若为1：捕获阶段

若为2：目标阶段

若为3：冒泡阶段

addEventListener 绑定事件处理方法中第三个参数：控制事件的阶段

true: 控制事件为捕获阶段

false: 控制事件为冒泡阶段

一般默认使用冒泡阶段，很少使用捕获阶段。

二、小案例

目的：为同一个元素绑定多个不同的事件指向相同的事件处理函数。

使用事件处理参数对象的 type 属性可以判断事件触发时候，事件的类型，从而做出相应的事件处理。

三、百度搜索小项目

目标：在搜索框输入关键字，自动在搜索框下方显示相关内容。

1、这里的候选数据本来应该来自服务器，这里用数组来模拟。

2、这里使用的是鼠标输入文字后的鼠标抬起事件：onkeyup。

3、 需要准备个临时数组存储于文本框输入文字匹配的字符串。

4、当搜索框的文本为空或者临时数组的内容为空时，循环删除下拉列表。

5、之所以输入多个文字，但是只创建了一个下拉列表的原因是因为在输入第二个文字的时候，先输入的其实是字母，这个时候不匹配，而我们在每次鼠标抬起的时候会清空临时数组，所以这个时候会先删除下拉列表，当我们输入第二个文字的时候，再重新创建相匹配的下拉列表。

6、每次进入鼠标抬起按键时，如果有下拉列表就循环删除。

7、注意在循环里面不要使用匿名函数。

欢迎关注

Web前端之巅

念念不忘，必有回响。