怎样解决支持同一元素句柄可以绑定多个监听函数问题？

问题描述：

支持同一元素句柄可以绑定多个监听函数

我们来分析这个问题，看下面的例子：

这里我们得理解

1）同一元素是意思？

2） 绑定多个监听函数？

如下面例子

window.onload=function(){//1个监听函数

 alert("1");}//没有输出结果

window.onload=function(){/2个监听函数

 alert("2");}//没有输出结果

window.onload=function(){//3个监听函数

 alert("3");}//没有输出结果

我们发现无法绑定输出3把1，2覆盖，所以我们得出一个结论就是：

传统事件无法多个监听函数

那么这时我们就得思考事件绑定都有那些方法？

1）传统事件绑定

2）现代事件绑定

既然传统事件绑定无法实现，那么我们就思考现代事件绑定：

w3c:addEventListenner()

ie:attachEvnt

如何来建立这个函数呢？

首先我们要做兼容是必然

做兼容套路

无非就是把浏览器的不同情况往if else里面套。

所以我们第一步先写一个函数

function addEvent(){

if()

{}

else

{}

}

第二步我们的思考函数怎么设置参的问题？

既然是支持同一元素，那么我们就必须要一个对像，用obj表示

还有参数我们的思考addEventListener与attach有什么共同特点的参数？

addEventListener(event,function,可选参数）;

attachEvent(event,function);

所以我们可以利用它们共同参数的相似特点来设定type和事件函数fn来表示

所以代码如下：

function addEvent(obj,type,fn){

if()

{}

else

{}

}

第三步就是做w3c与ie兼容，根据它们的用法来写

function addEvent(obj,type,fn){

if(typeof obj.addEventListener!="undefined"){

obj.addEventListener(type,fn,false);//w3c

}

else if(typeof obj.attchEvent!="undefined"){

obj.attachEvent('on'+type,fn);//ie

}}

现在我们就可以把上面的1 2 3的例子拿进行测试

addEvent(window,"load",function(){

alert(1);});//1这里window对应obj,load对应函数事件名onload,function则对应function

addEvent(window,"load",function(){

alert(2);});//2

addEvent(window,"load",function(){

alert(3);});//3
从这个例子我们可以得到一些思考程序问题的一般方法：

第一步分类试探法

也就是一谈到事件绑定，我们立马联想到是传统事件与现代事件绑定两种类型

第二我称之为排除

当利用这两方法都去尝试，发现传统不行，这就是排除法

第三我觉得参数的设定有点像归纳法

找出它们两的共性来设置参数