對於事件的綁定的方法有多種多樣，但是在解除綁定事件的時候，就要注意使用的是那種綁定事件的方法，因為不同的綁定方法所對應的解除事件是不同的。
1. 原始寫法
1.1 綁定事件：對象.事件=事件處理函數
<!doctype html>
<html>
<head>
<style type="text/css">
#div1{
width:200px;
height:200px;
background:pink;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="div1"></div>
<button type="button" id="btn1">綁定事件</button>
<button type="button" id="btn2">移除事件</button>
</body>
<script type="text/javascript">
var btn1= document.getElementById("btn1");
btn1.onclick = function(){
alert(1);
}
</script>
</html>
1.2 解除事件： 對象.事件=null (此方法就是函數的覆蓋)
<script type="text/javascript">
var btn1= document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
btn1.onclick = function(){
alert("btn1事件綁定成功！");
}
btn2.onclick = function(){
btn1.onclick =null;
alert("btn1所綁定的事件已經被移除！");
}
</script>
運行結果：在開始是，點擊“綁定事件”按鈕，會彈出一個提示框“btn1事件綁定成功！”，當點擊“移除事件”按鈕時，btn1所綁定的事件就已經移除了，並彈出提示
======================================================
2. 使用 attachEvent 、detachEvent、addEventListener 與 removeEventListener
2.1 事件綁定------attachEvent ，addEventListener
使用 attachEvent 和 addEventListenter 的好處就是，可以多次的進行事件的綁定，不向原始的方法那樣，前面綁定的事件將會被后面的綁定的事件所覆蓋，最后只能執行后面所綁定的函數。
attachEvent
<script type="text/javascript">
var btn1= document.getElementById("btn1");
btn1.attachEvent ('onclick',function(){alert('1');});
btn1.attachEvent ('onclick',function(){alert('2');});
</script>
運行結果：2，1
說明：attachEVent 是先綁定后執行，它將先執行我后綁定的函數。
注意：1）attachEvent 只能兼容 IE7，IE8；
2）attachEvent 綁定的事件前面要加“on”
addEventListener
<script type="text/javascript">
var btn1= document.getElementById("btn1");
btn1.addEventListener ('click',function(){alert('1');},false);
btn1.addEventListener ('click',function(){alert('2');},false);
</script>
運行結果：1，2
說明：1) addEventListener 是先綁定先執行，它將按順序執行我綁定的事件。
2) addEventListener 的第三個參數：
布爾值參數是true，表示在捕獲階段調用事件處理程序；如果是false，表示在冒泡階段調用事件處理程序
注意：1）addEventListener 與 attachEVent 正好相反， 只不兼容 IE7，IE8，其他大部分的瀏覽器都可以執行。
2）addEventListener 綁定的事件前面不要加“on”
2.2 事件解除------detachEvent，removeEventListener
detachEvent
<script type="text/javascript">
var fun = function(){
alert(11);
}
var btn1= document.getElementById("btn1");
var btn1= document.getElementById("btn1");
btn1.attachEvent ('onclick',fun,false);
btn1.detachEvent('onclick',fun,false);
</script>
removeEventListener
<script type="text/javascript">
var fun = function(){
alert(1);
}
var btn1= document.getElementById("btn1");
btn1.addEventListener('click',fun,false);
btn1.removeEventListener('click',fun,false);
</script>
注意：1） 在removeEventListener 傳入的參數與 addEventListener 傳入的參數要一致，看似使用了相同的參數，但實際上，第二個參數與傳入addEventListener()中的與第一個是完全不同的函數。
2） 因為移除時傳入的參數與添加處理程序時使用的參數相同。這也意味着通過addEventListener()添加的匿名函數無法移除。
btn1.addEventListener('click',function(){alert(1);},false);
btn1.removeEventListener('click',function(){alert(1);},false);//無效
3）在公用函數體存在參數的情況下，不能將帶參數的函數體傳給 addEventListener 和 romoveEventListener。
錯誤示例：
<script type="text/javascript">
var fun = function(e){
e.preventDefault();//阻止事件目標的默認動作
alert(1);
}
var btn1= document.getElementById("btn1");
btn1.addEventListener('click',fun(event),false);
btn1.removeEventListener('click',fun(event),false);
</script>
正確示例：
<script type="text/javascript">
var fun = function(e){
e.preventDefault();//阻止事件目標的默認動作
alert(1);
}
var btn1= document.getElementById("btn1");
btn1.addEventListener('click',fun,false);
btn1.removeEventListener('click',fun,false);
</script>
4）detachEvent 與 removeEventListener 注意事項相同。