事件绑定，常见的是odiv.onclick=function(){..........}; 这种方式绑定事件太单一，如果绑定多个，那么最后一个事件会覆盖掉之前的，也就是说只执行最后一次绑定的事件，这里要说的是addEventListener方法，和IE下的attachEvent方法：
html代码如下：
<html>
<head>
</head>
<style>
#box{
height:400px;
width:400px;
background: red;
}
#son1{
height:300px;
width:300px;
background: green;
}
#son2{
height:200px;
width:200px;
background: purple;
}
</style>
<script> </script>
<body>
<div id='box'>box
<div id='son1'>son1
<div id='son2'>son2 </div>
</div>
</div> </body>
</html>
界面如下图：
下面是<script>中的代码(非IE浏览器下addEventListener)：
window.onload=function(){
var obox=document.getElementById('box');
var oson1=document.getElementById('son1');
var oson2=document.getElementById('son2');
oson2.addEventListener('click',function(){alert('son2 dinaji');})
oson1.addEventListener('click',function(){alert('son1 dinaji');})
obox.addEventListener('click',function(){alert('box dinaji');})
}
上述代码的addEventListener（）只有两个参数，其实还有第三个参数：true/false 。默认的是false，代表在冒泡阶段调用事件处理程序，true代表在事件捕获阶段处理程序，
生活中还是以冒泡阶段处理为多。下面是IE下：
window.onload=function(){
var obox=document.getElementById('box');
var oson1=document.getElementById('son1');
var oson2=document.getElementById('son2');
oson2.attachEvent('onclick',function(){alert('son2 dinaji');})
oson1.attachEvent('onclick',function(){alert('son1 dinaji');})
obox.attachEvent('onclick',function(){alert('box dinaji');})
}
IE下attachEvent()只有两个参数，没有第三个参数的true或false。因为IE默认的就只能是冒泡阶段捕获，这是当年浏览器大战的原因，个人猜测，可能是因为IE用户量多吧，导致现在默认的都是在冒泡阶段处理。
事件绑定最大的好处是可以绑定多个事件，对同一个元素对象上绑定的多个事件来说，非IE下这些事件的处理顺序是符合代码绑定的先后顺序的，但在IE下对于多个事件绑定的处理顺序正好相反。如：
非IE：
oson2.addEventListener('click',function(){alert('first');},true); //先弹出 first
oson2.addEventListener('click',function(){alert('second');},true); //后弹出 second
IE：
oson2.attachEvent('onclick',function(){alert('first');}); //后弹出first
oson2.attachEvent('onclick',function(){alert('second');}); //先弹出second
既然能绑定事件，肯定能取消绑定事件，非IE下为removeEventListener(),IE 下为detachEvent() ，这里需要注意的是括号内的参数必须和事件绑定时的参数一样，但对于匿名函数来说，哪怕函数一样也取消不了绑定，因为两者被认为是不同的，如下代码就取消不了绑定：
oson2.addEventListener('click',function(){alert('first');});
oson2.removeEventListener('click',function(){alert('first');}) //取消绑定不成功
本人又用了函数声明式尝试一下发现也不行：
oson2.addEventListener('click',function test(){alert('first');});
oson2.removeEventListener('click',function test(){alert('first');});
如上面两段代码所述把匿名函数function (){alert('first');} 改为function test(){alert('first');}一样不行。
结论：不管是匿名函数，还是函数声明都视为不同参数，不能成功取消绑定。
解决方法就是先声明一个函数，两者传入共同的函数名即可：
先声明函数：
var test=function(){alert('first');};
再把函数名当参数传入：
oson2.addEventListener('click',test);
oson2.removeEventListener('click',test); //成功取消绑定
以上代码是能成功的，但还要注意第三个参数也要一致，上述代码没有第三个参数则默认都是false，如果一个为true，那也不能取消成功：
oson2.addEventListener('click',t,true); //第三个参数为true表示 捕获时执行事件程序
oson2.removeEventListener('click',t); //默认为false ，不同的参数，不能取消绑定
两者都为true即可：
oson2.addEventListener('click',t,true);
oson2.removeEventListener('click',t,true);
下面是为解决浏览器兼容封装事件绑定：
function addEvent(element,event,fun){
if(element.addEventListener)
{
element.addEventListener(event,fun);
}
else if(element.attachEvent)
{
element.attachEvent('on'+event,fun);//注意要加on
}
}
下面是取消事件绑定的封装：
function removeEvent(element,event,fun){
if(element.removeEventListener)
{
element.removeEventListener(event,fun);
}
else if(element.detachEvent)
{
element.detachEvent('on'+event,fun);//注意要加on
}
}
封装后再使用事件绑定和取消绑定就方便很多：
var t=function(){alert(' box ');};
var t1=function(){alert(' son1 ');};
var t2=function(){alert(' son2 ');};
绑定：
addEvent(obox,'click',t);
addEvent(oson1,'click',t1);
addEvent(oson2,'click',t2);
取消绑定：
removeEvent(obox,'click',t);
removeEvent(oson1,'click',t1);
removeEvent(oson2,'click',t2);
以上就是事件绑定的内容，也是自己的一次回顾。