从零开始学 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前端之巅

念念不忘,必有回响。

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20180623G18BV900?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券