事件绑定有两种,传统事件绑定,现代事件绑定。传统事件绑定有内联模式和脚本模式。脚本模式即把一个函数体赋给一个对象的事件属性。
window.onload=function() { var domb=document.getElementById(‘bd‘); domb.onclick=function(){ alert(‘按钮点击‘); };};
传统事件绑定存在的问题:
1.同一个对象的事件属性多个函数赋值很多次,前面的会被覆盖掉,只显示最后一个。
解决方法,把第一个函数的事件保存下来,然后再去执行一次。
window.onload=function(){ alert(‘q‘); }; if(typeof window.onload==‘function‘) { var saved=null; saved=window.onload; } window.onload=function(){ saved(); alert(‘s‘); };
2.同一个事件类型下,不同事件的切换
解决方法: 当执行了第一个事件后,把第二个事件在第一个事件函数中赋值给点击事件。
把添加事件封装在一个函数中去。并且一并解决上述问题。
//一个对象里面的键值对,也可以用数组形式访问,属性放在中括号里。一个事件函数,里面不应该再放同名的//事件函数。
function addEvent(obj,type,fn) { var saveEvent=null; if(typeof obj[‘on‘+type]==‘function‘) saveEvent=obj[‘on‘+type]; obj[‘on‘+type]=function(){ if(saveEvent) saveEvent(); fn.call(this); }; }
添加事件后必须移除,不然内存会溢出
//删除事件 function removeEvent(obj,type) { if(obj[‘on‘+type]) obj[‘on‘+type]=null; }
存在的问题:
1.如何避免添加已经添加过的函数。需要遍历事件,重名不添加。
2.删除事件时候,精确删除某个对象,某个类型,某个名称的函数。避免误删。
时间: 2024-10-10 14:46:47