DOM事件三個(gè)階段

• 捕捉階段（capture phase）：從最上層元素，直到最下層（你點(diǎn)擊的那個(gè)target）元素。路過(guò)的所有節(jié)*
  點(diǎn)都可以捕捉到該事件。
• 命中階段（target phase）：如果該事件成功到達(dá)了target元素，它會(huì)進(jìn)行事件處理。
• 冒泡階段（bubbling phase）：事件從最下層向上傳遞，依次觸發(fā)父元素的該事件處理函數(shù)。

DOM Level 0 Event

在HTML添加屬性onclick進(jìn)行事件的綁定

<div style="width: 100px;height: 100px; background-color: #5afcff" onclick="info()"></div>

<script>
    function info(){
        alert("這是DOM Level0 Event在HTML添加屬性");
    }
</script>

在javarscript中定義并綁定事件

<div id="hyq" style="width: 100px;height: 100px; background-color: #5afcff" ></divid>

<script>
document.getElementById("hyq").onclick=function () { info() };
function info(){
    alert("這是DOMLevel0 Event在JS中定義");
}
</script>

由于onclicl是對(duì)DOM元素的屬性的賦值，因此當(dāng)綁定多個(gè)事件時(shí)后者事件將會(huì)覆蓋前面的事件，顯示的效果為只有一個(gè)事件

<script>
var el = document.getElementById("hyq");
el.onclick = function (){
console.log("這是第一次點(diǎn)擊");
}
el.onclick = function (){
console.log("這是第er次點(diǎn)擊");
}
</script>

//顯示效果為第二次點(diǎn)擊，第一個(gè)事件被第二個(gè)覆蓋了

DOM Level 2 Event

• 為了解決事件覆蓋的問(wèn)題引入了addEventListener從而添加多個(gè)多個(gè)事件處理函數(shù)

addEventListener()包含三個(gè)參數(shù)分別為事件的類型 (如 "click" 或 "mousedown")—事件觸發(fā)后調(diào)用的函數(shù)—布爾值用于描述事件是冒泡還是捕獲（可選的，默認(rèn)為false,true則為添加捕獲階段的事件處理函數(shù)，否則為添加冒泡階段的事件處理函數(shù)）

<div id="hyq" style="width: 100px;height: 100px; background-color: #5afcff">
    <div id="hyy" style="width: 50px;height: 50px;background-color: #ff9afd"></div>
</div>

    <script>
        var el = document.getElementById("hyq");
        var ek = document.getElementById("hyy");
        el.addEventListener('click',function () {
            console.log("this is first");
        },true);
        el.addEventListener('click',function () {
            console.log("this is seconed");
        });
        ek.addEventListener("click",function () {
            console.log("heiheihei");
        });
        ek.addEventListener("click",function () {
            console.log("hahahaha");
        },true);
    </script>

顯示的結(jié)果

其中hahahaha設(shè)置了捕獲，但因?yàn)楫?dāng)前對(duì)象就是目標(biāo)對(duì)象，捕獲無(wú)效。該函數(shù)仍然作用于目標(biāo)階段。 既然捕獲失效，那么它的執(zhí)行順序就按照注冊(cè)事件的順序了，不會(huì)因?yàn)樗O(shè)置了無(wú)效的捕獲而提前得到執(zhí)行。

• removeEventListener(type, listener， Capture)方法，用來(lái)移除事件處理函數(shù)。

<div id="hyq"></div>

<script>
var el =  document.getElementById("hyq");
el.addEventListener('click',function () {console.log("Hello world!"); });
el.removeEventListrner('click',function () { console.log("Hello world!");});
</script>

*callback是必選參數(shù)！capture默認(rèn)值為false *