当前位置: 首页 > 编程笔记 >

JS的事件绑定深入认识

施俊明
2023-03-14
本文向大家介绍JS的事件绑定深入认识,包括了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库已经实现了很好的数据绑定机制的封装效果,但只知其然,不知其所以然还有会有种蒙在鼓里的感觉,亲自去分析一下具体的实现,会有一种豁然开朗的感觉,也体会到,做好一个兼容性、通用性强的程序更要考虑很多内容,解决很多问题,也正在在这些问题中逐渐清楚很多的。

 类似资料:
  • 本文向大家介绍深入理解JS的事件绑定、事件流模型,包括了深入理解JS的事件绑定、事件流模型的使用技巧和注意事项,需要的朋友参考一下  一、JS事件 (一)JS事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件:  onload/onunload/onsubmit/onresize/onchange/onfoucs/onscroll 3.键盘

  • 本文向大家介绍深入理解jQuery事件绑定,包括了深入理解jQuery事件绑定的使用技巧和注意事项,需要的朋友参考一下 html: javascript: 一些说明: bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数 $("a").bind("click",function(){alert("ok");});live(type,[data],fn) 给所有匹配的元

  • 本文向大家介绍js绑定事件和解绑事件,包括了js绑定事件和解绑事件的使用技巧和注意事项,需要的朋友参考一下 在js中绑定多个事件用到的是两个方法:attachEvent和addEventListener,但是这两个方法又存在差异性 attachEvent方法  只支持IE678,不兼容其他浏览器 addEventListener方法   兼容火狐谷歌,不兼容IE8及以下 addEventListe

  • 本文向大家介绍深入理解JQuery循环绑定事件,包括了深入理解JQuery循环绑定事件的使用技巧和注意事项,需要的朋友参考一下 深入理解JQuery循环绑定事件 以上这篇深入理解JQuery循环绑定事件就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持呐喊教程。

  • 除了可以使用addEventListener()方法监听某个特定元素上的事件外,也可以使用.on()方法实现批量元素的事件绑定。 .on( event , selector , handler ) event Type: String 需监听的事件名称,例如:'tap' selector Type: String 选择器 handler Type: Function( Event event )

  • 本文向大家介绍JS 事件绑定、事件监听、事件委托详细介绍,包括了JS 事件绑定、事件监听、事件委托详细介绍的使用技巧和注意事项,需要的朋友参考一下 在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定、事件监听、事件委托(事件代理)等。这些名词是什么意思呢,有什么作用呢? 事件绑定 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑