位置: 编程技术 - 正文

深入分析原生JavaScript事件(原生js)

编辑:rootadmin

推荐整理分享深入分析原生JavaScript事件(原生js),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:原生js有哪些,原生js,java原生类是什么,原生js有哪些,原生jdbc,原生js有哪些,java原生api,原生java是什么意思,内容如对您有帮助,希望把文章链接给更多的朋友!

JQuery这种Write Less Do More的框架,用多了难免会对原生js眼高手低。

小菜其实不想写这篇博客,貌似很初级的样子,但是看到网络上连原生js事件绑定和解除都说不明白,还是决定科普一下了。

首先声明,小菜懂的也不是很多,只是把我的思路和大家分享一下。

DOM0事件模型

事件模型在不断发展,早期的事件模型称为DOM0级别。

DOM0事件模型,所有的浏览器都支持。

直接在dom对象上注册事件名称,就是DOM0写法,比如:

意思就是注册一个onclick事件。当然,它和这种写法是一个意思:

这没什么,只不过是两种访问js对象属性的方法,[]的形式主要是为了解决属性名不是合法的标识符,比如:object.肯定报错,但是object[""]就避免了这个问题,与此同时,[]的写法,也把js写活了,用字符串表示属性名称,可以在运行时动态绑定事件。

言归正传,事件被触发时,会默认传入一个参数e,表示事件对象,通过e,我们可以获取很多有用的信息,比如点击的坐标、具体触发该事件的dom元素等等。

基于DOM0的事件,对于同一个dom节点而言,只能注册一个,后边注册的同种事件会覆盖之前注册的。例如:

结果会输出ok1。

接下来再说说this。事件触发时,this就是指该事件在哪个dom对象上触发。例如:

结果输出test。因为事件就是在id为test的dom节点上注册的,事件触发时,this当然代表这个dom节点,可以理解为事件是被这个dom节点调用的。

所以,想解除事件就相当简单了,只需要再注册一次事件,把值设成null,例如:

原理就是最后注册的事件要覆盖之前的,最后一次注册事件设置成null,也就解除了事件绑定。

事情还没结束,DOM0事件模型还涉及到直接写在html中的事件。例如:

通过这种方式注册的事件,同样遵循覆盖原则,同样只能注册一个,最后一个生效。

区别就是,这样注册的事件,相当于动态调用函数(有点eval的意思),因此不会传入event对象,同时,this指向的是window,不再是触发事件的dom对象。

DOM2事件模型

DOM2事件模型相对于DOM0,小菜仅仅了解如下两点:

· DOM2支持同一dom元素注册多个同种事件。

· DOM2新增了捕获和冒泡的概念。

DOM2事件通过addEventListener和removeEventListener管理,当然,这是标准。

但IE8及其以下版本浏览器,自娱自乐,搞出了对应的attachEvent和detachEvent,由于小菜才疏学浅,本文不做讨论。

addEventListener当然就是注册事件,她有三个参数,分别为:"事件名称", "事件回调", "捕获/冒泡"。举个例子:

事件名称就不用多说了,相比DOM0,去掉了前边的on而已。

事件回调也很好理解,事件触发了总得通知你吧!回调时和DOM0一样,也会默认传入一个event参数,同时this是指触发该事件的dom节点。

最后一个参数是布尔型,true代表捕获事件,false代表冒泡事件。其实很好理解,先来个示意图:

意思就是说,某个元素触发了某个事件,最先得到通知的是window,然后是document,依次而入,直到真正触发事件的那个元素(目标元素)为止,这个过程就是捕获。接下来,事件会从目标元素开始起泡,再依次而出,直到window对象为止,这个过程就是冒泡。

深入分析原生JavaScript事件(原生js)

为什么要这样设计呢?这貌似是由于深厚的历史渊源,小菜也不怎么了解,就不乱说了。

由此可以看出,捕获事件要比冒泡事件先触发。

假设有这样的html结构:

然后我们在外层div上注册两个click事件,分别是捕获事件和冒泡事件,代码如下:

最后,点击内层的div,先弹出ok1,后弹出ok。结合上边的原理图,外层div相当于图中的body,内层div相当于图中最下边的div,证明了捕获事件先执行,然后执行冒泡事件。

为什么要强调点击内层的div呢?因为真正触发事件的dom元素,必须是内层的,外层dom元素才有机会模拟捕获事件和冒泡事件,从原理图上就看出了。

如果在真正触发事件的dom元素上注册捕获事件和冒泡事件呢?

html结构同上,js代码如下:

当然还是点击内层div,结果是先弹出ok,再弹出ok1。理论上应该先触发捕获事件,也就是先弹出ok1,但是这里比较特殊,因为我们是在真正触发事件的dom元素上注册的事件,相当于在图中的div上注册,由图可以看出真正触发事件的dom元素,是捕获事件的终点,是冒泡事件的起点,所以这里就不区分事件了,哪个先注册,就先执行哪个。本例中,冒泡事件先注册,所以先执行。

这个道理适用于多个同种事件,比如说一下子注册了3个冒泡事件,那么执行顺序就按照注册的顺序来,先注册先执行。例如:

结果当然是依次弹出ok、ok1、ok2。

为了进一步理解事件模型,还有一种场景,假如说外层div和内层div同时注册了捕获事件,那么点击内层div时,外层div的事件一定是先触发的,代码如下:

结果是先弹出ok1。

假如外层div和内层div都是注册的冒泡事件,点击内层div时,一定是内层div事件先执行,原理相同。

细心的读者会发现,对于div嵌套的情况,如果点击内层的div,外层的div也会触发事件,这貌似会有问题!

点击的明明是内层div,但是外层div的事件也触发了,这的确是个问题。

其实,事件触发时,会默认传入一个event对象,前边提过了,这个event对象上有一个方法:stopPropagation,通过此方法,可以阻止冒泡,这样外层div就接收不到事件了。代码如下:

终于要说说怎么解除事件了。解除事件语法:btn.removeEventListener("事件名称", "事件回调", "捕获/冒泡");

这和绑定事件的参数一样,详细说明下:

· 事件名称,就是说解除哪个事件呗。

· 事件回调,是一个函数,这个函数必须和注册事件的函数是同一个。

· 事件类型,布尔值,这个必须和注册事件时的类型一致。

也就是说,名称、回调、类型,三者共同决定解除哪个事件,缺一不可。举个例子:

要想注册过的事件能够被解除,必须将回调函数保存起来,否则无法解除。

DOM0与DOM2混用

事情本来就很乱了,这又来个混合使用,还让不让人活了。。。

别怕,混合使用完全没问题,DOM0模型和DOM2模型各自遵循自己的规则,互不影响。

整体上来说,依然是哪个先注册,哪个先执行,其他就没什么了。

后记

至此,原生js事件已经讲的差不多了,小菜仅仅知道这些而已,欢迎读者补充其他知识点。

在实际应用中,真正的行家不会傻傻的真的注册这么多事件,一般情况下,只需在最外层dom元素注册一次事件,然后通过捕获、冒泡机制去找到真正触发事件的dom元素,最后根据触发事件的dom元素提供的信息去调用回调。

也就是说,行家会自己管理事件,而不依赖浏览器去管理,这样即可以提高效率,又保证了兼容性,JQuery不就是这么做的嘛~

好了,教程到此结束,希望对读者有所帮助!

JavaScript版的TwoQueues缓存模型 本文所指TwoQueues缓存模型,是说数据在内存中的缓存模型。无论何种语言,都可能需要把一部分数据放在内存中,避免重复运算、读取。最常见的场景

浅谈重写window对象的方法 重写window对象的方法不是一件新奇的事,比如我们可能需要改变默认alert的行为,如何安全的重写呢?小菜看到某知名IT网站是这样的写法:window.alert=fun

JavaScript前端图片加载管理器imagepool使用详解 前言imagepool是一款管理图片加载的JS工具,通过imagepool可以控制图片并发加载个数。对于图片加载,最原始的方式就是直接写个img标签,比如:imgsrc="图

标签: 原生js

本文链接地址:https://www.jiuchutong.com/biancheng/383832.html 转载请保留说明!

上一篇:浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入(浏览器环境下的事件循环)

下一篇:JavaScript版的TwoQueues缓存模型(javascriptcom)

  • 初级会计职称能加多少工资
  • 什么是进项税额转出
  • 印花税的缴纳方式有哪三种
  • 税控财务软件装什么系统
  • 现金回收期计算公式
  • 附加税预缴分录
  • 车船税不交怎么办
  • 增值税发票丢了怎么补开
  • 电子发票和纸质发票哪个好
  • 小规模纳税人改为一般纳税人需要什么材料
  • 购买原材料产生的运输费计入什么科目
  • 租赁的设备伤人了谁的责任
  • 企业所得税汇算清缴网上申报流程
  • 小规模纳税人需要汇算清缴吗
  • 所得税汇算清缴调整项目
  • 水利建设专项收入计入什么科目
  • 二手房交易需要多长时间?
  • 税务登记需要什么资料2022
  • 上报汇总之后怎么申报
  • 加工费月底需要全部结转吗
  • xp系统怎么删除打印机驱动程序
  • 怎么清除更新记录
  • 旧macbookpro
  • 土地增值税清算方法与技巧
  • 跨年期许
  • 公司个人垫付的费用会计分录
  • 开发票货款未公对公转怎么做账
  • 怎么做win8系统u盘pe
  • avsched32.exe是什么进程 avsched32进程有什么作用
  • ElementPlusError:[ElPagination] 你使用了一些已被废弃的用法,请参考 el-pagination 的官方文档
  • 上市公司发行股票会计分录
  • win10电脑记事本打不开显示错误
  • pddpic是什么文件
  • thinkphp登录验证
  • 分包工程的税金怎样处理
  • 白鹤芋好养活吗
  • ipcrm命令
  • db2bigint
  • 陈列费属于什么类目的
  • 小规模企业免征增值税如何做账
  • 确认委托代销手续费的会计分录
  • 什么情况下企业亏损但继续生产
  • 开具发票要注意的方面是有哪些?
  • 资产总额的季度平均值
  • 补提去年累计折旧
  • 分包管理费取费标准
  • 公司股东可以买公司股票吗
  • 政府专款专用
  • 工程招标费用由谁支付
  • 新成立的公司工会经费需要交吗
  • 租赁期限为一年
  • 年度总预算一般在次年
  • 研发费用如何做分录分析
  • 新企业的创建
  • 查询存储过程中的文件
  • ubuntu功能
  • win10自带邮件怎么登录foxmail账号
  • xp系统怎么把ie浏览器放到桌面
  • macbookair2015安装win7 单系统
  • win8.1介绍
  • linux常用命令find
  • Slackware Linux init 进程
  • opengl怎么学
  • opengl learn
  • 队列remove
  • web开发css
  • 用python写多线性模型
  • shell脚本-lt
  • 批处理打开网络连接
  • 基于mvc的项目实例
  • jquery禁用输入框
  • unity动画教程
  • python入门小程序编写
  • jquery跳出方法
  • js中对象
  • ActivityManager: Warning: Activity not started, its current task has been brought to the front 的的问题
  • 电子税务里面怎么作废发票
  • 国家税务局公告2021年第3号
  • 税控发票开票软件金税盘版发票未报送什么情况?
  • 国家税务总局令第52号 ,税务稽查案件办理程序规定
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设