登录  /  注册
首页 > web前端 > js教程 > 正文

一文详解js中的事件对象、事件源对象和事件流

藏色散人
发布: 2022-08-07 09:51:13
转载
2043人浏览过

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 <p>而使用事件委托的方法是</p><pre class="brush:php;toolbar:false">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*/}
登录后复制

相关推荐:【JavaScript视频教程

以上就是一文详解js中的事件对象、事件源对象和事件流的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:csdn网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号