addEvent.js源码解析
前言:
看两三遍即可。
在看 jQuery 源码时,发现了这段注释:
//源码5235行 /* * Helper functions for managing events -- not part of the public interface. * Props to Dean Edwards' addEvent library for many of the ideas. */ jQuery.event = { }复制代码
Dean Edwards 的 addEvent.js 库为 jQuery 的事件绑定提供了很多想法,我们就来看下 2005 年的 addEvent.js 。
〇、先复习下 Object 的内存地址指向的知识
let a={ } let b=a b[0]='111'
console.log(a,'a55') //{0:'111'}复制代码
b 改变属性,a 也会改变,因为 b 与 a 指向同一地址(b=a)
一、addEvent()
作用:
为目标元素绑定事件(如 click)
源码:
//addEvent即为DOM元素绑定事件
// a counter used to create unique IDs //为每一个事件添加唯一的id addEvent.guid = 1;
function addEvent(element, type, handler) { // assign each event handler a unique ID //如果用户自定义的回调函数没有$$guid的话, //为每个handler添加唯一的id if (!handler.$$guid) handler.$$guid = addEvent.guid++; // create a hash table of event types for the element //为目标元素添加events属性 if (!element.events) element.events = {}; // create a hash table of event handlers for each element/event pair //events是目标元素绑定的事件的集合 //第一次使用addEvent绑定往往是undefined let handlers = element.events[type]; if (!handlers) { handlers = element.events[type] = {}; // store the existing event handler (if there is one) //handlers的0属性作为目标元素的原生绑定事件 if (element["on" + type]) { handlers[0] = element["on" + type]; } } // store the event handler in the hash table //将每次绑定的事件保存到handler的id属性中 handlers[handler.$$guid] = handler;
// assign a global event handler to do all the work //为目标元素的原生事件绑定处理程序(handleEvent) element["on" + type] = handleEvent; }复制代码
解析:
注意let handlers = element.events[type]
,handlers 与 element.events[type] 指向同一地址,接下来都是对 handlers 进行操作,实际上也就是对 element.events 进行操作
关键!
addEvent 的目的是让目标元素的结构如下:
element:{ //依次执行了 click 对象里的每个 handler onclick:handleEvent(MouseEvent) events:{ click:{ // 如果先onclick了,就会在这里 // 0 : onclick(也就是 function (e) {console.log('原生点击了one')}) 1 : handler(也就是 function(){console.log('点击了one')} ) 2 : handler ( xxx ) 3 : ... .. : ... }, foucus:{
}, ..... :{
}
}}复制代码
注意里面的注释。
(1)可以看到通过 addEvent 绑定的'click'事件并不是真的绑定在 element 上,而是把绑定的事件处理程序(handler)都放到了 element 的 events 上,即绑定事件和目标元素的分离
(2)由 handleEvent 来统一执行 click 事件
二、handleEvent()
作用:
执行事件的处理程序
源码:
//执行事件的处理程序 function handleEvent(event) { // grab the event object (IE uses a global event object) console.log(event,'event55') //event即MouseEvent,原生的鼠标事件集合 event = event || window.event; // get a reference to the hash table of event handlers //找到相同事件的处理程序 //注意这个this,指的是目标元素 //找到handlers集合 let handlers = this.events[event.type]; // execute each event handler
//依次执行事件的处理程序 for (let i in handlers) { this.$$handleEvent = handlers[i]; this.$$handleEvent(event); } }复制代码
解析:
(1)看到上面的关键,再看 handleEvent 就简单地多,就是把 element->events->click 里的事件处理程序都执行下
(2)主要看for 里面,多了个handlers 和 handleEvent,我感觉是多余的(不知道下面说的对不对,因为想到了中学解数学题,当你觉得题干中的条件你用不到时,往往是自己想错了),因为直接这么写就好了啊:
写法一:
function handleEvent(event) { event = event || window.event; for (let i in this.events[event.type]) { this.events[event.type][i](event) } }复制代码
写法二:
function handleEvent(event) { event = event || window.event; let handlers = this.events[event.type]; for (let i in handlers) { handlers[i].call(this,event) } }复制代码
根据this
是谁调用的,this就是谁
的原则,那么handleEvent
的this
是element["on"+type]
,即element.onclick
在调用handleEvent
方法,既然是element
的属性onclick
在调用的话,那么执行的上下文就是element
,this
即element
Dean Edwards用this.$$handleEvent
来执行handler
,目的也是保证正确的作用域,即this
三、removeEvent
//移除监听事件 function removeEvent(element, type, handler) { // delete the event handler from the hash table console.log(handler,'handler52') if (element.events && element.events[type]) { delete element.events[type][handler.$$guid]; } }复制代码
注意:不把自定义事件包成一个变量,是移除不了监听事件的:
let one=document.querySelector("#one") addEvent(one,'click',function () { console.log('点击了one') }) removeEvent(one,'click',function () { console.log('点击了one') })复制代码
写成这样才可以:
let one=document.querySelector("#one") let handler=function () { console.log('点击了one') } addEvent(one,'click',handler) removeEvent(one,'click',handler)复制代码
四、实验
<div id="one">干我</div>
let one=document.querySelector("#one")
one.onclick=function (e) { console.log('原生点击了one') }
addEvent(one,'click',function () { console.log('点击了one') })复制代码
输出:原生点击了one 点击了one
<div id="one">干我</div>
let one=document.querySelector("#one")
addEvent(one,'click',function () { console.log('点击了one') })
one.onclick=function (e) { console.log('原生点击了one') }复制代码
输出:原生点击了one
,原因是后面的 one.onclick 覆盖了 addEvent() 里的事件绑定
当然 jQuery 是都会触发的。
五、内存泄漏
简单说:
element只绑定一次onclick
,只绑定一次events
。
并通过guid
来为每一个handler
定一个id
,然后依次添加进events.click
中,并通过onclick
执行
如果一直调用onclick来绑定事件的话,内存开销会很大。
最后:
完整代码请看github.com/AttackXiaoJ…
(完)
addEvent.js源码解析相关推荐
- js怎么调用wasm_Long.js源码解析
基于现在市面上到处都是 Vue/React 之类的源码分析文章实在是太多了.(虽然我也写过 Vite的源码解析 所以这次来写点不一样的.由于微信这边用的是 protobuf 来进行 rpc 调用.所以 ...
- 【Vue.js源码解析 一】-- 响应式原理
前言 笔记来源:拉勾教育 大前端高薪训练营 阅读建议:建议通过左侧导航栏进行阅读 课程目标 Vue.js 的静态成员和实例成员初始化过程 首次渲染的过程 数据响应式原理 – 最核心的特性之一 准备工作 ...
- js define函数_不夸张,这真的是前端圈宝藏书!360前端工程师Vue.js源码解析
优秀源代码背后的思想是永恒的.普适的. 这些年来,前端行业一直在飞速发展.行业的进步,导致对从业人员的要求不断攀升.放眼未来,虽然仅仅会用某些框架还可以找到工作,但仅仅满足于会用,一定无法走得更远.随 ...
- JavaScript数字运算必备库——big.js源码解析
概述 在我们常见的JavaScript数字运算中,小数和大数都是会让我们比较头疼的两个数据类型. 在大数运算中,由于number类型的数字长度限制,我们经常会遇到超出范围的情况.比如在我们传递Long ...
- video.js 源码解析
为什么80%的码农都做不了架构师?>>> 写在前面 现在视频业务越来越流行了,播放器也比较多,作为前端工程师如何打造一个属于自己的播放器呢?最快最有效的方式是基于开源播放器深度 ...
- 如何将文件地址转为url_Node.js 源码解析 util.promisify 如何将 Callback 转为 Promise
Nodejs util 模块提供了很多工具函数.为了解决回调地狱问题,Nodejs v8.0.0 提供了 promisify 方法可以将 Callback 转为 Promise 对象. 工作中对于一些 ...
- connect.js源码解析
前言 众所周知,connect是TJ大神所造的一个大轮子,是大家用尾式调用来控制异步流程时最常使用的库,也是后来著名的express框架的本源.但令人惊讶的是,它的源码其实只有200多行,今天也来解析 ...
- 【Vue.js源码解析 三】-- 模板编译和组件化
前言 笔记来源:拉勾教育 大前端高薪训练营 阅读建议:建议通过左侧导航栏进行阅读 模板编译 模板编译的主要目的是将模板 (template) 转换为渲染函数 (render) <div> ...
- 史上最全的vue.js源码解析(四)
虽然vue3已经出来很久了,但我觉得vue.js的源码还是非常值得去学习一下.vue.js里面封装的很多工具类在我们平时工作项目中也会经常用到.所以我近期会对vue.js的源码进行解读,分享值得去学习 ...
最新文章
- 将yolo标注转换为tensorflow_yolov3标注生成train.txt和test.txt同时做数据清洗
- 算法心经.数学的应用.积分的应用
- 公司电脑用域账号访问团队文件夹
- 热敏电阻温度特性曲线_热敏电阻与体温计的应用关系
- 记个SwitchButton笔记
- T-SQL命令性能比较– NOT IN与SQL NOT EXISTS与SQL LEFT JOIN与SQL EXCEPT
- 网络协议从入门到底层原理(10)WebSocket、WebService、RESTful、HTTPDNS、FTP文件传输协议、邮件相关协议、IPv6
- 手写文本 matlab 识别,手写汉字识别matlab
- java语言如何将小写字母转化为大写_java中如何把大写字母转换成小写字母,小写字母转换成大写字母...
- 1 年原创 150+ 篇,这位前阿里 P9 牛批!
- 基于专家知识的决策树分类|以DEM+影像数据在ENVI操作为例
- 微芯片植入大脑可保存人们的大脑记忆内容
- 关于chrome浏览器不能正常访问百度的解决方法
- linux c开多线程算质数,C语言判断素数(质数)
- 靠写iPhone程序发财的三个故事
- Windows 7下载
- 解密一个量化对冲基金开发人员的工作内容
- sql study conclusion
- Perl常用模块使用例子
- 运筹学 知识点总结 单元综合测试(一)
热门文章
- 百度广告投放决定排名的因素!在百度推广广告有效果吗?
- 墨者学院-XWAY科技管理系统V3.0
- SOLOV2源码解析
- 在个人电脑安装MySQL数据库,你还不会安装吧?
- tp接入富友协议支付
- 小白学前端——让新手头疼的num++和++num问题
- 全志A10s datasheet,A10s 数据手册,A10s规格书
- godspeed机器人_来自深渊第二季剧情
- 被称为“眼黄金”的叶黄素究竟是什么?叶黄素则能过滤蓝光
- linux电视浏览器下载软件,【UC浏览器开发者工具Linux版】UC浏览器开发者工具下载 v0.4.1 Linux版-趣致软件园...