js下 Day09、事件（二）

一．事件流

事件流描述的是从页面中接收事件的顺序，目前主要有三个模型：

#1. 事件冒泡:

事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素

#2. 事件捕获

不太具体的节点更早接收事件，而最具体的元素最后接收事件，和事件冒泡相反

#3. DOM事件流

DOM2级事件规定事件流包括三个阶段: 事件捕获阶段，处于目标阶段，事件冒泡阶段。首先发生的是事件捕获，为截取事件提供机会，然后是目标阶段，最后是冒泡阶段

DOM2级事件第三个参数布尔值: true 事件捕获 false 事件冒泡

阻止冒泡: e.stopPropagation()

取消默认行为: e.preventDefault()

事件源: e.target || e.srcElement

#二．事件委托

事件委托就是利用事件冒泡将子元素某一类型的事件委托给父元素集中管理。

事件委托绑定事件比循环绑定事件好在哪？

\1. 减少页面上的事件处理程序，减少DOM操作提高性能

\2. 简化动态渲染的数据其他的dom操作

#三．案例-三级联动

效果图:

功能思路分析:

功能一: 封装公用渲染方法

\1. 省市区结构一致，数据不同，可封装公用方法，点击时调用，传递不同数据

\2. 通过自定义属性记录数据的下标

\3. 省和市的数据都是数组对象格式，区是数组格式，渲染是需要做个判断

功能二:省份渲染

\1. 给省份盒子绑定点击事件

\2. 调用渲染方法，将省份数据渲染到ul中，并显示ul

\3. 利用事件委托，判断事件源是否为li，是则选中并隐藏ul

\4. 通过getAttribute()记录省份下标

\5. 重置市和区

功能三:城市渲染

\1. 给城市盒子绑定点击事件

\2. 调用渲染方法，通过省份下标找到城市数据，渲染到ul中，并显示ul

\3. 利用事件委托，判断事件源是否为li，是则选中并隐藏ul

\4. 通过getAttribute()记录城市下标

\5. 重置区

功能四:区域渲染

\1. 给区域盒子绑定点击事件

\2. 调用渲染方法，通过省份下标和城市下标找到区域数据，渲染到ul中，并显示ul

\3. 利用事件委托，判断事件源是否为li，是则选中并隐藏ul

#四．今日小结

事件流:事件传播的机制

分为三个阶段: 捕获阶段 ==> 目标阶段 ==> 冒泡阶段

捕获:由不具体到具体 ==> 外到内

冒泡:由具体到不具体 ==> 内到外

阻止冒泡: e.stopPropagation()

取消默认行为: e.preventDefault()

事件源: e.target || e.srcElement

获取自定义属性: 元素.getAttribute()

#五．作业 -- 标签库增删

效果图:

功能思路分析:

1. 添加自定义标签

(1) 点击添加标签按钮，创建标签

(2) 获取文本框的内容

(3) 添加到选中盒子里

2. 展开收起标签库

\3. 标签库渲染

(1) 模拟数据，渲染标签

4. 添加标签库标签

(1) 点击标签库中的标签添加到选中区域( 事件委托 )

(2) 选中项高亮

5. 删除标签

判断删除标签，是标签库中的标签则取消高亮( 事件委托 )