JS的事件绑定深入认识
一、传统事件模型
传统事件模型中存在局限性。
内联模型以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中的before-after-hook钩子函数
最近看别人的代码，接触到一个插件，before-after-hook，百度搜一圈也没有看到什么地方有教程,本文就来简单介绍一下这个插件的使用方法，需要的可以参考一下2022-12-12
Nuxt3 布局layouts和NuxtLayout的使用详解
layouts是Nuxt3提供的一种方便开发者快速实现自定义布局的约定，是基于Vue3的一个开发框架，基于服务器端渲染SSR，可以更加方便的用于Vue的SEO优化，这篇文章主要介绍了Nuxt3 布局layouts和NuxtLayout的使用,需要的朋友可以参考下2023-04-04
项目需求是这样的：在一个页面放2个悬浮框，悬浮框随页面的上下滚动有上下波动的效果，最终固定在同一位置，下面通过本文给大家分享基于JavaScript实现div层跟随滚动条滑动的相关资料，对js div跟随滚动条滑动相关知识感兴趣的朋友一起学习吧2016-01-01
下面小编就为大家分享一篇js的函数的按值传递参数的实例，具有很好的参考价值，一起跟随小编过来看看吧，希望对大家有所帮助2017-11-11
这篇文章主要介绍了JavaScript中常见的事件用法小结,需要的朋友可以参考下2023-05-05
本文主要介绍了js字符串分割处理的几种方法，主要介绍了6种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
页面滚动条处于低端,点击回到顶部，并且隐藏掉，具体实现代码如下，感兴趣的朋友可以参考下哈2013-06-06
javascript中数组（Array)对象和字符串（String)对象的常用方法总结
这篇文章主要介绍了javascript中数组（Array)对象和字符串（String)对象的常用方法,结合实例形式总结分析了javascript中关于数组和字符串的常用函数与使用技巧,需要的朋友可以参考下2016-12-12
这篇文章主要介绍了ES6数组与对象的解构赋值,结合实例形式详细分析了ES6中数组与对象的解构赋值原理、用法及相关操作注意事项,需要的朋友可以参考下2019-06-06
window.showModalDialog()返回值的学习心得总结
本篇文章主要介绍了window.showModalDialog()返回值的学习心得。需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
最新评论