day04-DOM-事件高级

webApi

day04-DOM-事件高级

目标：熟悉事件对象的使用，具备利用操作数组对象渲染订单系统的能力

事件对象

获取事件对象: 在事件里面接受一个形参即可

常用属性

e.key

keyup

####### 获取的是当前这一次的value

keydown

####### 获取的value是上一次的value

注意： 不建议再使用 keyCode

案例： 给发布微博案例添加按下回车发布新闻案例

事件流

事件流

过程: 事件捕获 => 事件目标阶段 => 事件冒泡 整个完整的过程就是事件流

实际工作都是使用事件冒泡为主

事件捕获

概念: 从DOM的根元素开始去执行对应的事件 (从外到里)

捕获机制必须使用事件监听的形式注册

DOM.addEventListener(事件类型, 事件处理函数, 是否使用捕获机制)

事件冒泡

概念: 当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡

事件冒泡的必要性

如果没有冒泡.给大盒子注册点击事件, 点击的是里面的小盒子,会导致大盒子的点击无法执行

事件委托

####### 自己不注册事件,将对应的事件注册给祖先元素

####### 减少事件的注册,提高效率

####### e.target => 当前点击的那个元素

阻止事件冒泡

1. 先要明确那一块区域不能冒泡

2. 需要阻止什么事件传递就给这块区域的最大盒子注册该事件

3. 在事件处理函数里面接受事件对象, 并添加上e.stopPropagation()

阻止冒泡

e.stopPropagation()

阻止事件冒泡

e.preventDefault()

链接的跳转

表单域跳转

事件注册的两种方式区别

传统on注册

同一个对象,后面注册的事件会覆盖前面注册(同一个事件)

直接使用null覆盖偶就可以实现事件的解绑

都是冒泡阶段执行的

事件监听注册

语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获)

后面注册的事件不会覆盖前面注册的事件(同一个事件)

可以通过第三个参数去确定是在冒泡或者捕获阶段执行

必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)

####### 匿名函数无法被解绑

mouseover和 mouseenter的区别

事件委托

优点

原理：

利用冒泡

综合案例-购物车案例

综合案例-渲染学生信息案例

需要会用findIndex 方法找到数组元素所在的索引号方便删除