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 相关文章推荐
extJs 下拉框联动实现代码
Apr 09 Javascript
div层的移动及性能优化
Nov 16 Javascript
javascript中加号(+)操作符的一些神奇作用
Jun 06 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
Sep 03 Javascript
javascript高级编程之函数表达式 递归和闭包函数
Nov 29 Javascript
JavaScript函数中关于valueOf和toString的理解
Jun 14 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
Sep 23 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
Sep 28 Javascript
收集前端面试题之url、href、src
Mar 22 Javascript
Array数组对象中的forEach、map、filter及reduce详析
Aug 02 Javascript
深入浅析js原型链和vue构造函数
Oct 25 Javascript
轻松学习JavaScript函数中的 Rest 参数
May 30 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编程开发“虚拟域名”系统
2006/10/09 PHP
PHP 存取 MySQL 数据库的一个例子
2006/10/09 PHP
php中常用编辑器推荐
2007/01/02 PHP
php+ajax注册实时验证功能
2016/07/20 PHP
几行代码轻松实现PHP文件打包下载zip
2017/03/01 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
Javascript 个人笔记(没有整理,很乱)
2007/07/07 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
2012/12/10 Javascript
自己使用js/jquery写的一个定制对话框控件
2014/05/02 Javascript
javascript基于prototype实现类似OOP继承的方法
2015/12/16 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
canvas实现十二星座星空图
2017/02/14 Javascript
详解webpack 多入口配置
2017/06/16 Javascript
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
angularJs的ng-class切换class
2017/06/23 Javascript
解决vue里碰到 $refs 的问题的方法
2017/07/13 Javascript
javascript中的event loop事件循环详解
2018/12/14 Javascript
在微信小程序中使用vant的方法
2019/06/07 Javascript
JavaScript 实现同时选取多个时间段的方法
2019/10/17 Javascript
JS通用方法触发点击事件代码实例
2020/02/17 Javascript
vue-drawer-layout实现手势滑出菜单栏
2020/11/19 Vue.js
进一步探究Python中的正则表达式
2015/04/28 Python
Python中处理字符串之endswith()方法的使用简介
2015/05/18 Python
详谈pandas中agg函数和apply函数的区别
2018/04/20 Python
python smtplib模块实现发送邮件带附件sendmail
2018/05/22 Python
python实现flappy bird小游戏
2018/12/24 Python
Django中使用Whoosh进行全文检索的方法
2019/03/31 Python
Python代理IP爬虫的新手使用教程
2019/09/05 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
TensorFLow 数学运算的示例代码
2020/04/21 Python
使用Tensorflow-GPU禁用GPU设置(CPU与GPU速度对比)
2020/06/30 Python
意大利奢侈品购物网站:Deliberti
2019/10/08 全球购物
美国购买隐形眼镜网站:Lenses For Less
2020/07/05 全球购物
学生喝酒检讨书
2014/02/06 职场文书
会计自荐信范文
2014/03/09 职场文书
Python实现对齐打印 format函数的用法
2022/04/28 Python