问题描述:
支持同一元素句柄可以绑定多个监听函数
我们来分析这个问题,看下面的例子:
这里我们得理解
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
从这个例子我们可以得到一些思考程序问题的一般方法:
第一步分类试探法
也就是一谈到事件绑定,我们立马联想到是传统事件与现代事件绑定两种类型
第二我称之为排除
当利用这两方法都去尝试,发现传统不行,这就是排除法
第三我觉得参数的设定有点像归纳法
找出它们两的共性来设置参数