將事件綁定到元素身上的三種方法:
1、HTML事件處理程序(不推薦使用)
1 <a onclick="hide()">
2、傳統的DOM事件處理程序
即在目標DOM事件的基礎上綁定事件。如果在聲明函數時加上括號,函數會立即調用,去掉括號,函數不會立即調用。
1 function change(){ 2 //code 3 } 4 var name = document.getElementById("name"); 5 name.onclick = change; //
3、設置事件監聽器。
即為addEventListener()函數,該函數有三個參數,第一個參數指定事件名稱,第二個參數是發生事件時要調用的函數,第三個參數是指定事件響應的方式,為布爾值。當第三參數為true時為冒泡方式,當參數為false時為捕獲方式。
1 element.addEventListener('event',functionName,Boolean);
因為在注冊事件處理程序和事件監聽器時,在函數名的后面是沒有小括號的,因此需要采用其他的手段來傳遞參數。
如果需要向事件處理程序或事件監聽器所調用的函數傳遞參數,就需要把方法調用封裝在匿名函數中。
1 el.addEventListener('event',function(){ 2 changename(5); 3 },false);
說到這里,就很要必要解釋一下事件流以及什么是事件冒泡、事件捕獲了。
事件流:描述從頁面中接受事件的順序。
HTML元素都位於另一些元素中。當一個元素發生某個事件時,它的父元素同樣會發生該事件。
當代碼在一個元素和其祖先元素或者后代元素上都有事件處理程序時,事件流就會變得很重要。
事件冒泡:指的是事件從最具體的節點開始向外傳播到最寬泛的節點。這是事件流的默認類型,被絕大多是瀏覽器支持。
事件捕獲:指的是事件從最寬泛的節點開始向內傳播到最具體的節點。這種方式在IE8和更早版本的IE中不被支持。
支持舊版本的事件監聽器
IE5~IE8中不支持addEventListener()方法。但支持attachEvent()方法,讓事件監聽器在舊版本的IE瀏覽器中同樣能運行。
使用事件監聽器之前,應檢測addEventListener()方法能否使用,不能使用則選擇attachEvent()方法。
1 el = document.getElementById('mybutton'); 2 if(el.addEventListener) 3 { 4 el.addEventListener('blur',function(){ 5 checkUsername(5); 6 },false); 7 }else{ 8 el.attachEvent('onblur',function(){ 9 checkUsername(5); 10 }); 11 }
要注意的是attachEvent()方法中,事件的名稱前面應該加上on,
事件冒泡過程是可以被阻止的,是為了防止事件冒泡帶來錯誤。阻止事件冒泡就是使用stopPropagation()方法。
1 event.stopPropagation();
其中event指的是事件對象。