關于JS中為對象綁定多個事件的問題

關于JS中為對象綁定多個事件的問題
           

首先我們需要知道如果我們直接使用 對象.事件= 的方式，那麼我們會發現他隻會執行最後一次的綁定。例如

我們在HTML中的Body中加一個button對象

<button id="btn01">點我</button>
           

然後我們在JS中給這個按鈕綁定點選事件

//window.οnlοad=function(){
			var btn01=document.getElementById("btn01");//獲得按鈕對象
			//給按鈕綁定了三個點選事件
			btn01.onclick=function(){
				alert(1);
			}
			btn01.onclick=function(){
				alert(2);
			}
			btn01.onclick=function(){
				alert(3);
			}
		}
           

我們可以看到他隻執行了最後一個alert(3)

但是如果我們需要他三個都執行那麼我們就需要使用addEventListener()函數。通過這個函數可以為一個元素綁定多個響應事件。參數需要三個部分

1.事件的字元串，但是不要on,例如點選事件寫成 “click”

2.回調函數，當事件被出發時調用

3.是否在捕獲階段觸發事件，需要一個布爾值，一般都傳false

例如

window.onload=function(){
			var btn01=document.getElementById("btn01");//獲得按鈕對象
			btn01.addEventListener("click",function(){
				alert(1);
			},false)
			btn01.addEventListener("click",function(){
				alert(2);
			},false)
			btn01.addEventListener("click",function(){
				alert(3);
			},false)
			/*//給按鈕綁定了三個點選事件
			btn01.οnclick=function(){
				alert(1);
			}
			btn01.οnclick=function(){
				alert(2);
			}
			btn01.οnclick=function(){
				alert(3);
			}*/
		}
           

則會出現

則會以此出現1，2，3則表示我們的多個事件綁定成功。

P.S.這個函數适用于大部分浏覽器，除了IE8以下