0
点赞
收藏
分享

微信扫一扫

DOM- 事件高级

冶炼厂小练 2022-04-22 阅读 31
javascript

1.事件对象

获取事件对象

事件对象:也是个对象,这个对象里有事件触发时的相关信息

例如:鼠标点击事件中,事件对象就存了鼠标点在哪个位置等信息

如何获取:在事件绑定的回调函数的第一个参数就是事件对象 一般命名为event、ev、e

 

事件对象常用属性

部分常用属性

type 获取当前的事件类型

clientX/clientY 获取光标相对于浏览器可见窗口左上角的位置

offsetX/offsetY 获取光标相对于当前DOM元素左上角的位置

key 用户按下的键盘键的值

2.事件流

事件流与两个阶段说明

事件流指的是事件完整执行过程中的流动路径

说明:假设页面里有个div,当触发事件时,会经历两个阶段,分别是捕获阶段、冒泡阶段

简单来说:捕获阶段是 从父到子  冒泡阶段是从子到父

事件捕获和事件冒泡

事件冒泡概念:

当一个元素的事件被触发时,同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡 简单理解:当一个元素触发事件后,会依次向上调用所有父级元素的同名事件 事件冒泡是默认存在的

事件捕获概念:      

从DOM的根元素开始去执行对应的事件 (从外到里) 事件捕获需要写对应代码才能看到效果

代码:

说明:addEventListener第三个参数传入true代表是捕获阶段触发(很少使用)

        若传入false代表冒泡阶段触发,默认就是false

        若是用 L0 事件监听,则只有冒泡阶段,没有捕获

阻止事件流动

 因为默认就有冒泡模式的存在,所以容易导致事件影响到父级元素 若想把事件就限制在当前元素内,就需要阻止事件流动 阻止事件流动需要拿到事件对象

语法:

鼠标经过事件: mouseover 和 mouseout 会有冒泡效果

                          mouseenter  和 mouseleave   没有冒泡效果(推荐)

阻止默认行为,比如链接点击不跳转,表单域的不提交

语法:

 

 

3.事件委托

 事件委托是利用事件流的特征解决一些开发需求的知识技巧

总结: 优点:给父级元素加事件(可以提高性能)

原理:事件委托其实是利用事件冒泡的特点, 给父元素添加事件,子元素可以触发

实现:事件对象.target 可以获得真正触发事件的元素

举报

相关推荐

0 条评论