02JavaScript事件——事件流、事件綁定類型、跨瀏覽器事件處理程序、阻止事件冒泡/默認事件

事件流

事件流就是頁面中的事件的觸發順序，IE提出了事件冒泡，網景提出了事件捕獲

事件冒泡：即事件由子元素向祖先元素傳播，在所有的瀏覽器中，幾乎所有都支持事件冒泡，事件的觸發由最確定的元素向父級逐級傳播，一直傳到html

事件捕獲：和冒泡完全相反，由祖先向子元素傳播，IE瀏覽器中不存在事件捕獲，事件的觸發由html開始向子級逐級傳播

DOM0級事件處理程序，默認都支持事件冒泡

例：

	document.documentElement.onclick=function(){
		alert("html");
	}
	document.body.onclick=function(){
		alert("body");
	}
	red.onclick=function(){
		alert("red");
	}
	yellow.onclick=function(){
		alert("yellow");
	}
	green.onclick=function(){
		alert("green");
	}

事件綁定類型

1、HTML指定：在標籤的行間綁定樣式，默認支持事件冒泡
2、DOM0級：常說的普通事件，如類似onclick等，DOM0級默認支持冒泡，注意！同時綁定多個相同事件，只有最後一個生效,其他被覆蓋
3、DOM2級：又稱爲添加事件監聽，存在兼容性問題，DOM2級可以爲一個元素綁定多個類型相同的事件，事件會按照綁定順序觸發，並不會發生覆蓋

非IE和IE9+：

addEventListener()添加事件

    參數1：字符串，事件類型，注意沒有on
    參數2：函數，表示事件觸發執行的函數
    參數3：可選參數，布爾值，用來控制事件流的類型，true表示事件捕獲，false表示事件冒泡，默認false

ipt.addEventListener("click",c,false);
function c(){alert("觸發點擊！")}

removeEventListener()刪除事件，參數和添加一樣

注意：
        1、第一個參數的值必須和添時一樣
        2、第二個參數，如果添加時是匿名函數，事件無法刪除，如果要刪除，添加時第二個參數需要一個已經聲明好的函數的函數名
        3、第三個參數的值必須和添加時一致

ipt.removeEventListener("click",c,false)

IE 8及8以下:

attachEvent()添加事件

參數1：字符串，表示事件類型，注意有on
參數2 ：表示事件執行的函數 

detachEvent()刪除事件，參數與添加時相同

跨瀏覽器事件處理程序

參數1，表示綁定事件的元素
       2、綁定事件類型的字符串
       3、事件執行函數
       4、布爾值，用來控制添加還是刪除，true表示添加，false表示刪除

	function eventHandle(ele,type,func,bol){
		// 1、先判斷添加還是刪除
		if(bol){
			// 添加事件
			if(ele.addEventListener){
				ele.addEventListener(type,func);
			}else if(ele.attachEvent){
				ele.attachEvent("on"+type,func);
			}else{
				ele["on"+type]=func;
			}
		}else{
			// 刪除事件
			if(ele.removeEventListener){
				ele.removeEventListener(type,func);
			}else if(ele.detachEvent){
				ele.detachEvent("on"+type,func);
			}else{
				ele["on"+type]=null;
			}
		}
	}

阻止事件冒泡/默認事件

阻止事件冒泡：非IE:event.stopPropagation();      IE:window.event.cancelBubble=true;

阻止默認事件：非IE：event.preventDefault();      IE :window.event.returnValue=false;