JavaScript中DOM事件的示例分析
这篇文章主要介绍了JavaScript中DOM事件的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
1、事件对象
【获取事件对象】
什么是事件对象：是个对象，这个对象里有事件触发时的相关信息。
事件对象的语法
元素.addEventListener('click',function(e){})【事件对象常用属性】
type：获取当前的事件类型
clientX/clientY：获取光标相对于浏览器可见窗口左上角的位置
offsetX/offsetY：获取光标相对于当前DOM元素左上角的位置
key：用户按下的键盘的值
【案例】：
Document 
2、事件流
【解释】： 事件流是指事件完整执行过程中的流动路径
【图解】：
【说明】：
捕获阶段是从父到子
冒泡阶段是从子到父
【什么是事件冒泡】 ：当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。
事件冒泡是默认存在的。
【案例解释】
Document
【事件捕获概念】： 从DOM的根元素开始去执行对应的事件。
【语法】
DOM.addEventListener(事件类型,事件处理函数,是否使用捕获机制)
【说明】
addEventListener第三个参数传入true代表是捕获阶段触发
若传入false代表冒泡阶段触发，默认就是false
原来的写法没有捕获只有冒泡阶段
【阻止事件的流动】
语法：
事件对象.stopProPagation()
说明：
阻止事件的流动，在捕获和冒泡阶段都有效
mouseover 和 mouseout 会有冒泡效果
mouseenter 和 mouseleave 没有冒泡效果(推荐)
【阻止事件的默认行为】
语法：
e.preventDefault()
3、事件委托
【解释】： 将事件委托于其他元素进行处理。
【优点】： 给父级元素添加事件可以极大的优化性能
【原理】： 利用事件冒泡的特点，给父级元素添加事件，子元素可以触发
【语法】： 事件对象.target可以获取得到真正触发事件的元素
4、综合案例
**【需求】：**点击录入按钮，可以增加学生信息
Document 新增学员
姓名： 年龄： 性别: 薪资： 就业城市：就业榜
| 学号 | 姓名 | 年龄 | 性别 | 薪资 | 就业城市 | 操作 |
|---|
感谢你能够认真阅读完这篇文章，希望小编分享的"JavaScript中DOM事件的示例分析"这篇文章对大家有帮助，同时也希望大家多多支持，关注行业资讯频道，更多相关知识等着你来学习!
