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 相关文章推荐
优化javascript的执行速度
Jan 23 Javascript
不要在cookie中使用特殊字符的原因分析
Jul 13 Javascript
JS获取单击按钮单元格所在行的信息
Jun 17 Javascript
JS实现黑客帝国文字下落效果
Sep 01 Javascript
jquery调整表格行tr上下顺序实例讲解
Jan 09 Javascript
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
深入理解Vue官方文档梳理之全局API
Nov 22 Javascript
JavaScript实现快速排序的方法分析
Jan 10 Javascript
redux中间件之redux-thunk的具体使用
Apr 17 Javascript
VUE前后端学习tab写法实例
Aug 06 Javascript
vue Tab切换以及缓存页面处理的几种方式
Nov 05 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
Nov 04 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基于CodeIgniter实现图片上传、剪切功能
2016/05/14 PHP
Open and Print a Word Document
2007/06/15 Javascript
JS数字抽奖游戏实现方法
2015/05/04 Javascript
jQuery隐藏和显示效果实现
2016/04/06 Javascript
AngularJS过滤器filter用法总结
2016/12/13 Javascript
JS实现双击内容变为可编辑状态
2017/03/03 Javascript
JavaScript实现反转字符串的方法详解
2017/04/27 Javascript
使用 jQuery 实现表单验证功能
2017/07/05 jQuery
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
2018/01/02 Javascript
vue.js的computed,filter,get,set的用法及区别详解
2018/03/08 Javascript
Vue路由对象属性 .meta $route.matched详解
2019/11/04 Javascript
JS对日期操作封装代码实例
2019/11/08 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
python中类的属性和方法介绍
2018/11/27 Python
对python生成业务报表的实例详解
2019/02/03 Python
Django如何开发简单的查询接口详解
2019/05/17 Python
详解python pandas 分组统计的方法
2019/07/30 Python
python中altair可视化库实例用法
2021/01/26 Python
Html5实现单张、多张图片上传功能
2019/04/28 HTML / CSS
详解HTML5 录音的踩坑之旅
2017/12/26 HTML / CSS
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
教师实习的自我鉴定
2013/10/26 职场文书
环境科学专业个人求职的自我评价
2013/11/28 职场文书
2014学雷锋活动总结
2014/03/09 职场文书
乡镇交通安全实施方案
2014/03/29 职场文书
开学典礼演讲稿
2014/05/23 职场文书
工作求职信
2014/07/04 职场文书
领导班子四风对照检查材料
2014/09/23 职场文书
房屋所有权证明
2014/10/20 职场文书
2015年党员干部承诺书
2015/01/21 职场文书
困难补助申请报告
2015/05/19 职场文书
行政处罚告知书
2015/07/01 职场文书
银行安全保卫工作总结
2015/08/10 职场文书
谢师宴学生答谢词
2015/09/30 职场文书
2016年“六一儿童节”校园广播稿
2015/12/17 职场文书
Windows Server 2019 安装DHCP服务及相关配置
2022/04/28 Servers