事件流是描述頁面接收事件的順序。
具體的有事件冒泡事件捕獲DOM事件流。
1、事件冒泡又叫IE的事件流，即事件開始時(shí)由最具體的元素（文檔中嵌套層次最深的那個(gè)節(jié)點(diǎn)）接收逊抡，然后逐級(jí)向上傳播到較為不具體的節(jié)點(diǎn)（文檔）。
2零酪、事件捕獲的思想是不太具體的節(jié)點(diǎn)應(yīng)該更早的接收到事件冒嫡，而最具體的節(jié)點(diǎn)應(yīng)該在最后接收到節(jié)點(diǎn)。事件捕獲的用意在于事件到達(dá)預(yù)定目標(biāo)之前捕獲它四苇。
3孝凌、DOM2級(jí)事件流規(guī)定的事件流包括三個(gè)階段：事件捕獲階段、處于目標(biāo)階段和冒泡階段月腋。首先發(fā)生的是事件捕獲蟀架，為截獲事件提供了機(jī)會(huì)。然后是實(shí)際的目標(biāo)接收到事件榆骚。最后一個(gè)階段是冒泡階段片拍，可以在這個(gè)階段對(duì)事件作出響應(yīng)。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>事件流</title>
</head>
<body>
<div>
<input type="button" id="btn" onclick = "showMessage();" >
</div>
</body>
</html>
**事件冒泡：順序(從最先發(fā)生--到 ---最外層) input - div - body - html - document **
事件捕獲：與事件冒泡相反妓肢。document - html - body - div - input
使用事件處理程序
1.HTML事件處理程序
2.DOM0級(jí)事件處理程序
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>事件流</title>
</head>
<body>
<div>
<input type="button" id="btn" onclick = "showMessage();" value="按鈕" >
<input type="button" id="btn2" value="按鈕2" >
</div>
<script>
//HTML事件處理程序
function showMessage(){
alert("HTML事件處理程序");
}
//Dom0級(jí)事件處理程序
var btn2 = document.getElementById("btn2");
btn2.onclick=function(){
alert("Dom0級(jí)事件處理程序");
}
</script>
</body>
</html>
3.DOM2級(jí)事件處理程序
DOM2j級(jí)事件定義了兩個(gè)方法：
用于處理指定和刪除事件處理程序的操作
addEventListener()和removeEventListner().
接受三個(gè)參數(shù)：要處理的事件名捌省、作為事件處理程序的函數(shù)和布爾值
布爾值：false 默認(rèn) 使用事件冒泡；
DOM0級(jí)和DOM2級(jí) 都可以給 添加多個(gè)處理程序
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>事件流</title>
</head>
<body>
<div>
<input type="button" id="btn" onclick = "showMessage();" value="按鈕" >
<input type="button" id="btn2" value="按鈕2" >
<input type="button" id="btn3" value="按鈕3" >
</div>
<script>
//HTML事件處理程序
function showMessage(){
alert("HTML事件處理程序");
}
//Dom0級(jí)事件處理程序
var btn2 = document.getElementById("btn2");
btn2.onclick=function(){
alert("Dom0級(jí)事件處理程序");
}
btn2.onclick = null;//移出btn2的點(diǎn)擊事件
//DOM2級(jí)事件處理程序
var btn3 = document.getElementById("btn3");
btn3.addEventListener("click",showMessage,false);//事件不用加on
//同時(shí)添加多個(gè)事件處理
btn3.addEventListener("click",function(){
alert(this.value);//每一個(gè)當(dāng)前操作的對(duì)象 都有一個(gè)this 可以用來代替當(dāng)前對(duì)象
},false);
//移出事件處理
btn3.removeEventListen("click",showMessage,false);
</script>
</body>
</html>
4碉钠、IE處理程序
attachEvent()添加事件
detachEvent()刪除事件
接受相同的兩個(gè)參數(shù)：事件處理程序的名稱和時(shí)間處理程序的函數(shù)
btn3.attachEvent("onclick",showMessage);//添加
btn3.detachEvent("onclick",showMessage);//移出
5纲缓、添加跨瀏覽器兼容
var EventUtil = {
// 添加事件監(jiān)聽
add: function(element, type, callback){
if(element.addEventListener){ //Dom2級(jí)
element.addEventListener(type, callback, false);
} else if(element.attachEvent){ //IE
element.attachEvent('on' + type, callback);
} else { //Dom0級(jí)
element['on' + type] = callback;
}
}
// 刪除事件監(jiān)聽
del: function(element, type, callback){
if(element.removeEventListener){ //Dom2級(jí)
element.removeEventListener(type, callback, false);
} else if(element.detachEvent){ //IE
element.detachEvent('on' + type, callback);
} else { //Dom0級(jí)
element['on' + type] = null;
//注意這里的寫法 element.[onclick]===element.onclick;
}
}
}
//調(diào)用部分
function showMessage(){
alert("方法調(diào)用");
}
btn=document.getElementById("btn");
EventUtil.add(btn,click,showMessage);
