作者:狄言洁_171 | 来源:互联网 | 2023-02-06 03:47
这篇文章主要为大家详细介绍了JavaScript的DOM事件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
目录
- 1、事件对象
- 2、事件流
- 3、事件委托
- 4、综合案例
- 总结
1、事件对象
【获取事件对象】
- 什么是事件对象:是个对象,这个对象里有事件触发时的相关信息。
- 事件对象的语法
元素.addEventListener("click",function(e){})
【事件对象常用属性】
- type:获取当前的事件类型
- clientX/clientY:获取光标相对于浏览器可见窗口左上角的位置
- offsetX/offsetY:获取光标相对于当前DOM元素左上角的位置
- key:用户按下的键盘的值
【案例】:
2、事件流
【解释】: 事件流是指事件完整执行过程中的流动路径
【图解】:
【说明】:
【什么是事件冒泡】 :当一个元素的事件被触发时,同样的事件将会在该元素的所有祖先元素中依次被触发。
事件冒泡是默认存在的。
【案例解释】
【事件捕获概念】: 从DOM的根元素开始去执行对应的事件。
【语法】
DOM.addEventListener(事件类型,事件处理函数,是否使用捕获机制)
【说明】
- addEventListener第三个参数传入true代表是捕获阶段触发
- 若传入false代表冒泡阶段触发,默认就是false
- 原来的写法没有捕获只有冒泡阶段
【阻止事件的流动】
语法:
说明:
- 阻止事件的流动,在捕获和冒泡阶段都有效
- mouseover 和 mouseout 会有冒泡效果
- mouseenter 和 mouseleave 没有冒泡效果(推荐)
【阻止事件的默认行为】
语法:
3、事件委托
【解释】: 将事件委托于其他元素进行处理。
【优点】: 给父级元素添加事件可以极大的优化性能
【原理】: 利用事件冒泡的特点,给父级元素添加事件,子元素可以触发
【语法】: 事件对象.target可以获取得到真正触发事件的元素
4、综合案例
**【需求】:**点击录入按钮,可以增加学生信息
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注编程笔记的更多内容!