漫漫学习之路何其久远,只有抛弃浮躁,静下来看书方能有所收获. 写此文章仅为记录自身学习之路,文章内容不是固定的,每当我发现新的东西就会添加进去.文章也可能有错误,希望看到的兄弟能帮我指出,在此小弟谢谢了.
一.事件有哪些要注意的问题
1.问题一:每个事件只能注册一个函数
window.onload =function (){ var div =document.getElementByTagName('div')[0]; div.onclick = a; div.onclick = b; functiona (){alert('a');} functionb (){alert('b');} } //b会覆盖a 单机页面执行b
(1)解决方案一:
window.onload =function (){ var div =document.getElementByTagName('div')[0]; div.οnclick=function () { a(); b();} functiona (){alert(this.className);} function b (){alert(this.id);} }
缺陷1:不能在运行时加入函数,必须同时放在一起
缺陷2:此时a,b方法中的this指向的是window对象,而不是div对象,不过可以通过a.call(this);函数解决
,这样this就指向div对象了
(2)解决方案二:
functionaddEvent(obj,sj,fn) { //obj是要添加事件的对象 //sj是添加的事件 //fn是方法 var saved ; if(typeofobj['on'+sj] == 'function') saved = obj['on'+sj];//当添加函数时,检查是否是存在,存在则保存 obj['on'+sj]= function () { if(saved)saved(); if(typeoffn === 'function')fn(); } }
缺陷:虽然解决了运行添加的问题,但是还是有不足之处
1.如果重复添加同一个函数,就会导致重复执行同一个函数
2.不能删除已添加函数
(3)解决方案三:
window.onload =function (){ functionaddEvent(obj,sj,fn) { if(!obj[sj+'account']) obj[sj+'account'] =1;//为对象添加一个计数器,下标0保留 if(!fn[sj+'id']) fn[sj+'id'] =obj[sj+'account']++;//为每个函数添加一个标识的属性,以判定重复 if(!obj._eventHander) obj._eventHander =[];//第一次执行 则创建一个数组 if(!obj._eventHander[sj]) { obj._eventHander[sj] =[];//第一次为这个事件添加函数,则创建一个数组保存函数 if(obj['on'+sj])//检测是否之前存在函数 若存在保存在第一个 obj._eventHander[sj][0]= obj['on'+sj]; else obj._eventHander[sj][0] = function(){}; } obj['on'+sj] = hander; obj._eventHander[sj][fn[sj+'id']] =fn;//将按照函数的标识数值为数组赋值 //如果重复了,就会覆盖原来的 这样就不会重复添加了 function hander() { var f = obj._eventHander[sj]; for(var i = 0; i < f.length;i++) if(f[i]) f[i].call(this);//必须加上if语句 如果不加 当我删除函数的时候就会出现问题 } } //删除事件的函数 functiondelEvent(obj,sj,fn) { if(!obj._eventHander|| typeof fn != 'function' || !obj._eventHander[sj]) returnfalse; if(obj._eventHander[sj][fn[sj+'id']]== fn) deleteobj._eventHander[sj][fn[sj+'id']]; } //对同一个事件添加函数 addEvent(document,'click',a); addEvent(document,'click',b); addEvent(document,'click',a); //为不同的事件添加函数 addEvent(document,'click',a); addEvent(document,'mousedown',b); functiona (){alert('a');} functionb (){alert('b');} }
javascript之事件一
最新推荐文章于 2024-07-20 10:36:53 发布