JS的事件绑定深入认识


Posted in Javascript onJune 26, 2014

一、传统事件模型

传统事件模型中存在局限性。

内联模型以HTML标签属性的形式使用,与HTML混写,这种方式无疑造成了修改以及扩展的问题,已经很少使用了。

脚本模型是将事件处理函数写到js文件中,从页面获取元素进行对应事件函数的绑定以触发执行。但也存在不足之处:

1.一个事件绑定多个事件监听函数,后者将覆盖前者。

2.需要限制重复绑定的情况

3.标准化event对象

二、现代事件绑定

DOM2级事件定义了两个方法用于添加、删除事件:addEventListener()、removeEventListener().他们分别接收三个参数:事件名、函数、冒泡或捕获的布尔值(true表示捕获,false表示冒泡)。

与之对应,IE提供了类似的两个方法attachEvent()和 detachEvent(),但IE的两个方法存在另外的问题:无法传递this对象(IE中的this指向window)可以使用call方法进行对象冒充:

function addEvent(obj,type,fn){ 
if(typeof obj.addEventListener != 'undefined'){ 
obj.addEventListener(type,fn,false); 
}else if(obj.attachEvent != 'undefined'){ 
obj.attachEvent('on' + type,function(){ 
fn.call(obj,window.event); 
}); 
} 
};

但由于添加时执行的是匿名函数,因此添加后无法进行删除;另外IE提供方法还会有无法顺序执行绑定事件、存在内存泄漏的问题。

为了解决这一系列的问题,就有必要对方法进行进一步的封装,对其他浏览器使用DOM2级标准进行,对于IE,采用基于传统模式的添加、删除,思路为:

1.添加是使用JS的散列表存储对象事件,为每一个对象事件分配一个ID值,按添加的调用顺序,先判断是否存在相同的处理函数,不存在的话就依次将事件绑定函数添加到散列表中,这样解决了无法顺序执行以及重复添加的问题

2.删除时进行遍历函数匹配的判断,存在则删除

总结:

之前对JS的事件绑定并没有太深的认识,甚至停留在传统事件绑定模型上,对程序实现上还是认识太浅,这次学习封装库这部分内容时,才学习到很多JS上面向对象的应用。虽说类似于JQuery的这样js库已经实现了很好的数据绑定机制的封装效果,但只知其然,不知其所以然还有会有种蒙在鼓里的感觉,亲自去分析一下具体的实现,会有一种豁然开朗的感觉,也体会到,做好一个兼容性、通用性强的程序更要考虑很多内容,解决很多问题,也正在在这些问题中逐渐清楚很多的。

Javascript 相关文章推荐
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
Mar 27 Javascript
jquery下利用jsonp跨域访问实现方法
Jul 29 Javascript
js中split和replace的用法实例
Feb 28 Javascript
jquery判断当前浏览器的实现代码
Nov 07 Javascript
Vue.js学习笔记之 helloworld
Aug 14 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
May 08 Javascript
js Date()日期函数浏览器兼容问题解决方法
Sep 12 Javascript
微信小程序云开发之模拟后台增删改查
May 16 Javascript
layui table 多行删除(id获取)的方法
Sep 12 Javascript
关于layui toolbar和template的结合使用方法
Sep 19 Javascript
vue 使用 canvas 实现手写电子签名
Mar 06 Javascript
基于JavaScript获取url参数2种方法
Apr 17 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
Jun 26 #Javascript
jquery的clone方法应用于textarea和select的bug修复
Jun 26 #Javascript
document.forms用法示例介绍
Jun 26 #Javascript
JS获取当前日期时间并定时刷新示例
Mar 04 #Javascript
使用ajaxfileupload.js实现ajax上传文件php版
Jun 26 #Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
Jun 26 #Javascript
php读取sqlite数据库入门实例代码
Jun 25 #Javascript
You might like
一个经典的PHP文件上传类分享
2014/11/18 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
Laravel如何实现适合Api的异常处理响应格式
2020/06/14 PHP
根据一段代码浅谈Javascript闭包
2010/12/14 Javascript
js和jquery对dom节点的操作(创建/追加)
2013/04/21 Javascript
select多选 multiple的使用示例
2014/06/16 Javascript
JQuery实现简单的图片滑动切换特效
2015/11/22 Javascript
JavaScript 随机验证码的生成实例代码
2016/09/22 Javascript
JavaScript原生节点操作小结
2017/01/17 Javascript
原生js实现吸顶效果
2017/03/13 Javascript
JavaScript中附件预览功能实现详解(推荐)
2017/08/15 Javascript
你可能不知道的JSON.stringify()详解
2017/08/17 Javascript
Vue二次封装axios为插件使用详解
2018/05/21 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
2019/01/24 Javascript
javascript中call()、apply()的区别
2019/03/21 Javascript
python实现迭代法求方程组的根过程解析
2019/11/25 Javascript
微信小程序国际化探索实现(附源码地址)
2020/05/20 Javascript
[03:59]DOTA2英雄梦之声_第07期_水晶室女
2014/06/23 DOTA
Python如何快速实现分布式任务
2017/07/06 Python
在Python中输入一个以空格为间隔的数组方法
2018/11/13 Python
python队列Queue的详解
2019/05/10 Python
Python使用import导入本地脚本及导入模块的技巧总结
2019/08/07 Python
pymysql 开启调试模式的实现
2019/09/24 Python
PyTorch中 tensor.detach() 和 tensor.data 的区别详解
2020/01/06 Python
构建高效的python requests长连接池详解
2020/05/02 Python
Python txt文件常用读写操作代码实例
2020/08/03 Python
OpenCV利用python来实现图像的直方图均衡化
2020/10/21 Python
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
十佳班主任事迹材料
2014/01/18 职场文书
党员年终个人总结
2015/02/14 职场文书
2015高考寄语集锦
2015/02/27 职场文书
农村环境卫生倡议书
2015/04/29 职场文书
公司表扬信格式
2015/05/04 职场文书
2016猴年春节慰问信
2015/11/30 职场文书
CSS3鼠标悬浮过渡缩放效果
2021/04/17 HTML / CSS
Golang中channel的原理解读(推荐)
2021/10/16 Golang