添加事件
addEventListener(事件名,事件函数,false)
移除事件
removeEventListener(事件名，事件函数,false)
注意：删除事件时，保证删除的事件处理函数与添加时保持一致
实例：
<body>
<button id="btn1">按钮</button>
<button id="btn-remove">移除按钮一的点击事件</button>
<script type="text/javascript">
var oBtn=document.getElementById('btn1');
var oBtn2=document.getElementById('btn-remove');
//追加点击事件
oBtn.addEventListener('cilck',show,false);
//添加鼠标经过事件
oBtn.addEventListener('mouseover',function(){
this.style.color='red';
},false);
//添加鼠标离开事件
oBtn.addEventListener('mouseout',function(){
this.style.color='#333';
},false);
//另一个按钮
//添加点击事件
document.getElementById('btn-remove').addEventListener('click',function(){},false)；
oBtn.removeEventListener('click',show,false);
function show(){
alert('111');
}
</script>
</body>
点击切换事件
<body>
<button id="btn-hide">隐藏</button>
<button id="btn-show">显示</button>
<button id="btn-toggle">切换</button>
<div id="box"></div>
<script type="text/javascript">
var o=document.getElementById('box');
//隐藏
document.getElementById('btn-hide').addEventListener('click',function(){
o.style.display='none';
},false);
//显示
document.getElementById('btn-show').addEventListener('click',function(){
o.style.display='block';
},false);
//切换
document.getElementById('btn-toggle').addEventListener('click',function(){
var dis=window.getComputedStyle(o,null).display;//盒子的属性付给了display
if(dis=='block'){
o.style.display='none';
}else{
o.style.display='block';
}
},false);
</script>
</body>
