学习浅谈事件监听

看过不少关于事件绑定（事件监听）的文章，曾经也白痴过。现在稍微懂点，仅给初学者了解。

初期看到这个事件很陌生，因为作为美工的我负责的是拔特效，写一些下拉菜单。

直到有一天，当写一个模拟select菜单的时候遇见一个问题，当时和我另外一个同事写的东西通用了一个id的特效，但是我的代码被覆盖了。

知道网上搜索才了解到解决方法。

事件：addEventListener//FF,Chorme..

        attachEvent//ie

例子：

window.onload = function(){

var oDiv=document.getElementById('div1');

oDiv.onclick=function(){

alert('a');

}

oDiv.onclick=function(){

alert('b');

}

}

//弹出的内容会是b.    a不会出现

利用事件监听

window.onload = function(){

var oDiv=document.getElementById('div1');

if(oDiv.addEventListener){//兼容ff  chorme

oDiv.addEventListener('click',fn,false);

oDiv.addEventListener('click',function(){

alert(2);

},false);

}

else{

oDiv.attachEvent('onclick',fn);

oDiv.attachEvent('onclick',

function(){

alert(2);

}

);

}

}

function fn(){

alert(1);

}

//这样我们添加几个事件他都会执行  唯一的区别就是ie6,7，8和其他浏览器弹出的顺序不一样。ff和chorme弹出是1,2  而6,7，8弹出的是2,1。

下面让我们来写一个完整的通用的事件监听

//通用部分

function getAddEvent(obj,ev,fn){

if(obj.addEventListener){

obj.addEventListener(ev,fn,false);//特有形式加false具体怎么理解，我也不知道

}

else{

obj.attachEvent('on'+ev,fn);

}

}

window.onload=function(){
var oDiv = document.getElementById('div1')
getAddEvent(oDiv,'click',function(){
alert(1);
})
getAddEvent(oDiv,'click',function(){
alert(2);
})
}

综合了以前所学的写了一个基本方法专门调用事件

style

#div1{ width:200px; height:100px; background:#F00;}

html

<div id="div1"></div>

js

var eventUtil={
addEvent:function(obj,ev,fn){//添加事件绑定
if(obj.addEventListener){
obj.addEventListener(ev,fn,false);
}
else{
obj.attachEvent('on'+ev,fn);
}
},
reomveEvent:function(obj,ev,fn){//移除事件绑定
if(obj.addEventListener){
obj.removeEventListener(ev,fn,false);
return true;
}
else{
obj.detachEvent('on'+ev,fn);
return true;
}
},
getStyle:function(obj,name){//获取css样式
if(obj.currentStyle){
return obj.currentStyle[name];
}
else{
return getComputedStyle(obj,null)[name];
}
}
}
window.onload=function(){
var oDiv= document.getElementById('div1');
console.log(eventUtil.getStyle(oDiv,'width'));
eventUtil.addEvent(oDiv,'click',function(){alert(1)});
}