看过不少关于事件绑定（事件监听）的文章，曾经也白痴过。现在稍微懂点，仅给初学者了解。
初期看到这个事件很陌生，因为作为美工的我负责的是拔特效，写一些下拉菜单。
直到有一天，当写一个模拟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)});
}
