Dean-Edward的事件系统实现
时间:2022-05-04
本文章向大家介绍Dean-Edward的事件系统实现,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
jQuery早期的事件系统,主要借鉴自Dean-Edward的事件模型。虽说早期的该事件模型也有些许bug,诸如:
1,绑定的事件及其处理程序等数据并未存储到缓存中,而是直接存储在dom元素上,这样不仅污染了dom元素,而且还有可能造成隐患,比如在早期的ie下
拷贝元素,顺带着连这些数据都拷贝了,有可能发生交错引用进而引起内存泄露;
2,对待所有浏览器一视同仁,不论ie系还是现代浏览器,都统一采用 on+type的dom0级事件处理,这样失去了现代浏览器对事件冒泡或者捕获的控制,丧
失了灵活性。
但是DE事件模型,的确解决了浏览器的兼容问题,特别是IE下attachEvent绑定事件处理函数,在执行回调函数时无序执行的问题,也解决了在回调函数中this指向
的问题,顺带着对event参数做了简单的修补,这种无侵入式的模型在当时都是首屈一指的。
现在自己贴出根据DE模型,自己修改后的事件系统:
addEvent.guid = 1;
addEvent.events = {}; //简单缓存系统
function addEvent(el,type,fn){
if(!fn.$$guid){
fn.$$guid = addEvent.guid++;
}
if(!el.$$guid){
el.$$guid = addEvent.guid++;
}
if(!addEvent.events[el.$$guid]){
addEvent.events[el.$$guid] = {};
}
var fns = addEvent.events[el.$$guid][type];
if(!fns){
fns = addEvent.events[el.$$guid][type] = {};
// 若在html行内绑定事件,则首先执行
if(el['on'+type]){
fns[0] = el['on'+type];
}
}
fns[fn.$$guid] = fn;
el['on'+type] = handleEvent;
}
function deleteEvent(el,type,fn){
if(fn.$$guid in addEvent.events[el.$$guid][type]){
delete addEvent.events[el.$$guid][type][fn.$$guid];
}
}
function handleEvent(event){
// 修正跨iframe获取不到event的bug
event = event || fixEvent(((this.ownerDocument || document || this).parentWindow || window).event);
var type = event.type,returnValue = true,
handlers = addEvent.events[this.$$guid][type];
for(var i in handlers){
if(handlers[i].call(this,event) === false){
returnValue = false;
}
}
return returnValue;
}
function fixEvent(event) {
event.preventDefault = function(){return event.returnValue = false;};
event.stopPropagation = function(){return event.cancelBubble = true;};
return event;
}
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android端Charles抓包
- Spring boot 启动提示数据源错误
- leetcode树之从上到下打印二叉树
- 整理C/C++的可变参数
- ThingJS结合Web地图API开发,让数据展示更加出色!
- 如何分析交易记录?
- [技术创作101训练营]小程序云开发实战:从零搭建科技爱好者周刊小程序
- 【技术创作101训练营】innerHTML插入运行js字符串问题探究
- 组合体惯量法A: matlab程序—机械臂动力学建模
- vue+echarts 实现两个小例子
- 2020CV秋招求职的若干思考
- 快速学习-ElasticJob高可用
- 快速学习-Elastic调度部署
- 快速学习-ElasticJob应用API
- 快速学习-ElasticJob-Lite Quick Start