漫漫学习之路何其久远,只有抛弃浮躁,静下来看书方能有所收获.
写此文章仅为记录自身学习之路,文章内容不是固定的,每当我发现新的东西就会添加进去.文章也可能有错误,希望看到的兄弟能帮我指出,在此小弟谢谢了.
一.事件有哪些要注意的问题
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.onclick=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');}
 
}