在面试中,有的时候我们想竭力的表达自己的想法,往往没有听清题目 就开始回答,所以给出的答案往往都是答非所问。面试时一定要听清面试官的题目,这样才可以在面试中做到游刃有余。而回答题目一般有两层意思:普通答案,期望答案。期望答案就是加分项,这 才是面试官真正提问这个问题的本意。比如:一般的 IE 事件绑定不 w3c 事件绑定有什么区 别?能说得上 attachEvent,addEventLisenter 的是普通答案,然后在继续 attachEvent 里 边的 this 指向会有问题,addEventLisenter 还有第三个参数,还有冒泡绑定等等用法之类 的。 所以由此得出的结论是不管我们的水平能力是多少,一定要听清题目,尽自己最大的努 力言简意赅的回答问题,而是要抓住要点。
事件绑定有两种形式:
一、给一个对象绑定一个事件处理函数的第一种形式如下:
obj.onclick = fn1;
function fn1(){
alert(1);
alert(this);
}
function fn2(){
alert(2);
alert(this);
}
这种方式有个缺点:多个事件处理函数时会相互覆盖,比如:
document.onclick = fn1;
document.onclick = fn2; //会覆盖前面绑定的fn1
二、给一个对象绑定一个事件处理函数的第二种形式如下:
在IE下用attachEvent,标准浏览器下用addEventListener。两者之间的区别如下:
① ie: obj.attachEvent(事件名称,事件函数)
1.没有捕获
2.事件名称有on
3.多个事件函数执行的顺序:标准ie下正序 非标准ie下倒序
4.this指向window
② 标准:obj.addEventListener(事件名称,事件函数,是否捕获);
1.有捕获
2.事件名称没有on
3.多个事件执行的顺序是正序
4.this指向触发该事件的对象(在下面的例子中指的是document)
示例如下:
document.attachEvent('onclick',fn1);
document.attachEvent('onclick',fn2);
此时,attachEvent的this指向window,可利用call来修正attachEvent的this指向问题,由window对象变为document对象,具体代码如下:
document.attachEvent('onclick',function(){
fn1.call(document);
})
document.attachEvent('onclick',function(){
fn2.call(document);
})
document.addEventListener("click",fn1,false);
document.addEventListener("click",fn2,false);
addEventListener的第三个参数表示是否捕获:默认是false。false代表冒泡, true代表捕获
通过如下代码,还可以发现这种方式的特点是:可以给一个对象的同一个事件绑定多个不同的函数,多个事件处理函数时不会相互覆盖。
最后,为了兼容不同的浏览器,封装bind绑定函数,同时解决attachEvent的this指向问题,具体代码如下:
function bind(obj,evname,fn){
if(obj.addEventListener){
obj.addEventListener(evname,fn,false);
}else{
obj.attachEvent('on' + evname,function(){
fn.call(obj);
});
}
}
bind(document,'click',fn1);
bind(document,'click',fn2);