事件流講解來襲，嘎嘎嘎嘎嘎 1.事件流：描述的是在頁面中接受事件的順序。 2.事件冒泡：由最具體的元素接收，然後逐級向上傳播至最不具體的元素的節點（文檔）。 3.事件捕獲：最不具體的節點先接收事件，而最具體的節點應該是最後接收事件。 事件處理： 1.HTML事件處理：直接添加到HTML結構中（例：之 ...
事件流講解來襲，嘎嘎嘎嘎嘎
----------------------------------------------------------------
1.事件流：描述的是在頁面中接受事件的順序。
2.事件冒泡：由最具體的元素接收，然後逐級向上傳播至最不具體的元素的節點（文檔）。
3.事件捕獲：最不具體的節點先接收事件，而最具體的節點應該是最後接收事件。
--------------------------------------------------------------------
事件處理：
1.HTML事件處理：直接添加到HTML結構中（例：之前的onclick等，可以往前查看例子）。
2.DOM0級事件處理：把一個函數賦值給一個事件處理程式屬性。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
例（針對2）：<div id="div">
<button id="btn">按鈕</button>
</div>
<script>
var btn1=document.getElementById("btn");
btn.onclick=function(){
alert("hello,DOM0級事件處理程式1。");
}
</script>
結果：界面出現
，滑鼠點擊按鈕後，彈出對話框
若在上述代碼中稍做改變：
<div id="div">
<button id="btn">按鈕</button>
</div>
<script>
var btn1=document.getElementById("btn");
btn.onclick=function(){
alert("hello,DOM0級事件處理程式1。");
}
btn1.onclick=function(){
alert("hello,DOM0級事件2.");
}
</script>
結果：界面出現一按鈕
，滑鼠點擊後彈出對話框
我們可以發現對二個函數對第一個進行了覆蓋，即這就是DOM0級事件的缺點。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
3.DOM2級事件處理：
（1）addEventListener("事件名"，“事件處理函數”，“布爾值”)
true：事件捕獲。
false:事件冒泡。
（2）removeEventListener();
詳細前幾我上篇裡面的 DOM EventListener.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~`
例：
<div id="div">
<button id="btn">按鈕</button>
</div>
<script>
var btn1=document.getElementById("btn").addEventListener("click",demo);
function demo(){
alert("DOM2事件。");
}
</script>
結果：按鈕，點擊按鈕，彈出提示框DOM2事件。
優點：對比於DOM0級事件，DOM2級不會有覆蓋現象。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-----------------------------------------------------------------------------------------
4.IE事件處理程式
attachEvent:添加事件；
detachEvent:移除事件。
（ps:這兩個的運用原理跟addEventListener()和removeEventListener()差不多，只是涉及到瀏覽器的是否能執行後用的，處理相容問題。）
-------------------------------------------------------------------------------------------
例：(解決了相容問題的例子，綜合例子。)
<div>
<button id="btn1">按鈕</div>
</div>
<script>
var btn1=document.getElementById("btn1");
if(btn1.addEventListener()){
btn1.addEventListener("cilck",demo);
}else if(btn1.attachEvent){
btn1.attachEvent("onclick",demo);
}else{
btn1.onclick=demo();
}
function demo(){
alert("綜合例子");
}
</script>
