apis四天webapi课程笔记.pptx

WebAPIs第四天DOM-事件高级

事件对象事件流事件委托综合案例

掌握事件对象的使用具备利用操作数据渲染学生信息案例的能力

事件对象获取事件对象事件对象常用属性01

事件对象是什么也是个对象，这个对象里有事件触发时的相关信息例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息如何获取在事件绑定的回调函数的第一个参数就是事件对象一般命名为event、ev、e1.1获取事件对象目标：能说出什么是事件对象事件对象

事件对象是什么？也是个对象，这个对象里有事件触发时的相关信息事件对象在哪里？在事件绑定的回调函数的第一个参数就是事件对象小结

事件对象获取事件对象事件对象常用属性01

部分常用属性type获取当前的事件类型clientX/clientY获取光标相对于浏览器可见窗口左上角的位置offsetX/offsetY获取光标相对于当前DOM元素左上角的位置key用户按下的键盘键的值现在不提倡使用keyCode1.1获取事件对象目标：能够使用常见事件对象属性

课堂案例跟随鼠标案例需求：一张图片一直跟着鼠标移动分析：①：鼠标在页面中移动，用到mousemove事件②：不断把鼠标在页面中的坐标位置给图片left和top值即可案例

课堂案例按下回车发布微博案例需求：按下回车键盘，可以发布信息分析：①：用到按下键盘事件keydown或者keyup都可以②：如果用户按下的是回车键盘，则发布信息③：按下键盘发布新闻，其实和点击发布按钮效果一致send.click()案例

事件对象事件流事件委托综合案例

事件流事件流与两个阶段说明事件捕获和事件冒泡阻止事件流动02

事件流指的是事件完整执行过程中的流动路径说明：假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段简单来说：捕获阶段是从父到子冒泡阶段是从子到父2.1事件流和两个阶段说明目标：能够说出事件流经过的2个阶段

事件流事件流与两个阶段说明事件捕获和事件冒泡阻止事件流动02

事件冒泡概念:当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的同名事件事件冒泡是默认存在的2.2事件捕获和事件冒泡目标：能够说出事件流经过的2个阶段

事件捕获概念：从DOM的根元素开始去执行对应的事件(从外到里)事件捕获需要写对应代码才能看到效果代码：说明：addEventListener第三个参数传入true代表是捕获阶段触发（很少使用）若传入false代表冒泡阶段触发，默认就是false若是用L0事件监听，则只有冒泡阶段，没有捕获2.2事件捕获和事件冒泡目标：能够说出事件流经过的2个阶段

事件流事件流与两个阶段说明事件捕获和事件冒泡阻止事件流动02

因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素若想把事件就限制在当前元素内，就需要阻止事件流动阻止事件流动需要拿到事件对象语法：此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效2.3阻止事件流动目标：能够写出阻止事件流动的代码

鼠标经过事件：mouseover和mouseout会有冒泡效果mouseenter和mouseleave没有冒泡效果(推荐)2.3阻止事件流动目标：能够写出阻止事件流动的代码

阻止默认行为，比如链接点击不跳转，表单域的不提交语法：2.3阻止事件流动目标：能够写出阻止事件流动的代码

两种注册事件的区别：传统on注册（L0）同一个对象,后面注册的事件会覆盖前面注册(同一个事件)直接使用null覆盖偶就可以实现事件的解绑都是冒泡阶段执行的事件监听注册（L2）语法:addEventListener(事件类型,事件处理函数,是否使用捕获)后面注册的事件不会覆盖前面注册的事件(同一个事件)可以通过第三个参数去确定是在冒泡或者捕获阶段执行必须使用removeEventListener(事件类型,事件处理函数,获取捕获或者冒泡阶段)匿名函数无法被解绑2.3阻止事件流动目标：能够写出阻止事件流动的代码

事件对象事件流事件委托综合案例

事件委托03

事件委托是利用事件流的特征解决一些开发需求的知识技巧总结：优点：给父级元素加事件（可以提高性能）原理：事件委托其实是利用事件冒泡的特点，给父元素添加事件，子元素可以触发实现：事件对象.target可以获得真正触发事件的元素3.事件委托目标：能够说出事件委托的好处

事件委托是委托给了谁？父元素如何找到真正触发的元素？e.target事件对象.target小结

事件对象事件流事件委托综合案例

综合案例渲染学生信息案例需求：点击录入按钮，可以增加