js中的事件对象、事件源对象和事件流实例分析
本篇内容主要讲解“js中的事件对象、事件源对象和事件流实例分析”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“js中的事件对象、事件源对象和事件流实例分析”吧!
成都创新互联公司服务项目包括华阴网站建设、华阴网站制作、华阴网页制作以及华阴网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，华阴网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到华阴省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！
js中事件对象、事件源对象、事件流分析理解
事件对象（event）
什么是事件：事件就是指js中所有可以发生的有并且有监听的事件，比如：(鼠标、键盘以及浏览器窗口变化等）
是什么是事件对象（event）：通俗讲就是一个记录了事件各种信息的一个对象。
这里需要注意的是：事件对象会有兼容性问题，在除IE的浏览器中为event，而非浏览器中为window.event，
btn.onclick = function(event){let e = event || window.event}事件源对象
简单来说，就是指事件具体是在那个对象上发生的，对于element元素来说，事件源对象就是指你所点击的元素。同样存在浏览器兼容问题：
在fireFox中为event.srcElement
在IE中为event.target
兼容写法参照事件对象
事件流
事件流主要分为两类：1.捕获事件 2.冒泡事件 触发顺序是先捕获在冒泡
但是如果细分的话在捕获到冒泡阶段会存在一个目标阶段，即所具体操做的dom元素要进行的操作阶段
捕获事件
先由最上一级的节点先接收事件，然后向下传播到具体的节点。eg：当用户点击了p元素，采用事件捕获，则click事件将按照document>htm>body>p的顺序进行传播。传递方式是由外向内传递。
冒泡事件
和捕获事件相反，它是由内向外传递，当用户点击p时它会向父级传递，p>body>html。***由于这种特性常常用于事件委托。
事件委托
我们将所有子元素要触发的相同事件绑定到父元素身上，这样可以减少对DOM操作提高性能。具体使用方法是使用事件源对象的方法。
- 1
- 2
- 3
- 4
- 5
要对li绑定点击事件，通常我们的做法是循环给li田间点击事件
let oLi = document.querySelectorAll("li")
for(let i; i < oLi.length; i++){
oLi[i].onclick = function(){
console.log("i")
}
}而使用事件委托的方法是
let oUl = document.querySelector("ul")
oUl.onclick = function(event){
let e = event || window.event
console.log(e.target.innerHTML)
}优点
提高性能，不需要循环所有元素一个一个绑定事件。
灵活，有动态创建进来的新元素不需要重新绑定事件。
阻止事件冒泡和阻止默认事件
阻止事件冒泡的操作（兼容性写法）
***有些事件不需要进行冒泡操作
function stopBubble(event){
var e = event||window.event //事件对象兼容写法
e.stopProgation() ? e.stopProgation() : e.cancelBubble = true //IE兼容写法}阻止默认事件（兼容写法）
***阻止a标签以及鼠标右键默认跳转和菜单事件
function cancelHandle(event){
var e = event||window.event
e.preventDefault() ? e.preventDefault() : e.returnValue = false/*ie*/}到此，相信大家对“js中的事件对象、事件源对象和事件流实例分析”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
分享文章：js中的事件对象、事件源对象和事件流实例分析
链接URL：http://scjbc.cn/article/ipeodo.html
