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之dhDataGrid Ver2.0.0代码
Jul 01 Javascript
js正确获取元素样式详解
Aug 07 Javascript
JavaScript聚焦于第一个字段的代码
Oct 15 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
Mar 14 Javascript
javaScript(JS)替换节点实现思路介绍
Apr 17 Javascript
node.js入门教程
Jun 01 Javascript
js+csss实现的一个带复选框的下拉框
Sep 29 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
Mar 19 Javascript
AngularJS基础 ng-model-options 指令简单示例
Aug 02 Javascript
js HTML5 canvas绘制图片的方法
Sep 08 Javascript
JS设计模式之访问者模式定义与用法分析
Feb 05 Javascript
解决JavaScript layui 下拉框不显示的问题
Aug 14 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
各种战术和打法的原创者
2020/03/04 星际争霸
php 方便水印和缩略图的图形类
2009/05/21 PHP
PHP图片上传代码
2013/11/04 PHP
使用Appcan客户端自动更新PHP版本号(全)
2015/07/31 PHP
smarty模板的使用方法实例分析
2019/09/18 PHP
yii2.0框架实现上传excel文件后导入到数据库的方法示例
2020/04/13 PHP
使用Java实现简单的server/client回显功能的方法介绍
2013/05/03 Javascript
jquery中通过父级查找进行定位示例
2013/06/28 Javascript
深入理解Javascript里的依赖注入
2014/03/19 Javascript
JavaScript中的类(Class)详细介绍
2014/12/30 Javascript
Backbone.js的一些使用技巧
2015/07/01 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
2016/01/05 Javascript
全面理解闭包机制
2016/07/11 Javascript
bootstrap按钮插件(Button)使用方法解析
2017/01/13 Javascript
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
2017/08/04 Javascript
微信小程序 rich-text的使用方法
2017/08/04 Javascript
jquery ajaxfileupload异步上传插件
2017/11/21 jQuery
微信小程序之自定义组件的实现代码(附源码)
2018/08/02 Javascript
vue 设置 input 为不可以编辑的实现方法
2019/09/19 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
简单介绍Python中的JSON模块
2015/04/08 Python
Python实现桶排序与快速排序算法结合应用示例
2017/11/22 Python
解决在Python编辑器pycharm中程序run正常debug错误的问题
2019/01/17 Python
Windows上安装tensorflow  详细教程(图文详解)
2020/02/04 Python
深入浅析Python 函数注解与匿名函数
2020/02/24 Python
Python多线程的退出控制实现
2020/08/10 Python
CSS3 calc()会计算属性详解
2018/02/27 HTML / CSS
美国第一个网上卖鞋零售商:OnlineShoes.com
2017/09/24 全球购物
墨尔本照明批发商店:Mica Lighting
2017/12/28 全球购物
jurlique茱莉蔻英国官网:澳洲天然护肤品
2018/08/03 全球购物
几道数据库的概念性面试题
2014/05/30 面试题
移动通信行业实习自我鉴定
2013/09/28 职场文书
优秀中职教师事迹材料
2014/08/26 职场文书
学校四风问题对照检查材料思想汇报
2014/09/26 职场文书
CSS中实现动画效果-附案例
2022/02/28 HTML / CSS