JavaScript---事件詳解

標籤：false   func   remove   als   event   fun   add   描述   gpo   

事件流

描述的是在頁面中接受事物的順序

接收事物的順序

• 事件冒泡

　　由最具體的元素接收，然後逐級向上傳播至最不具體的元素節點（文檔）

• 事件捕獲

　　最不具體的節點接收事件，而最集體的節點應該是最後接收事件

事件處理HTML事件處理

直接添加到HTML結構中

<button id="btn1" onclick="demo()">按鈕</button><script>    function demo(){        alert("Hello");    }</script>

 

這種處理方式，存在修改函數名，需要到html中修改事件調用的函數名的問題

DOM0級事件處理

把一個函數賦值給一個事件處理常式屬性

解決了HTML事件處理的問題

<button id="btn1">按鈕</button><script>    var btn1=document.getElementById(btn1);    btn1.onclick=function(){        alert("Hello");    };//這樣寫的話，前面的事件會被覆蓋    btn1.onclick=function(){        alert("Hello2");    };    //清除事件    btn1.onclick=null;</script>

仍然存在問題，當有多個事件時，前面的事件會被覆蓋，只執行最後一個事件處理

DOM2級事件處理

• addEventListener("事件名", "事件處理函數", "布爾值");

　　　　true：事件捕獲

　　　　false：事件冒泡

• removeEventListener();

<div id="divid">    <button id="btn1">按鈕</button></div>//這樣寫就不會覆蓋前面的事件<script>    var btn1 = document.getElementById(btn1)    btn1.addEventListener("click", function(){        alert("Hello")    });    btn1.addEventListener("click", function(){        alert("Hello2")    });</script>

 

存在IE8及以下版本不支援該事件處理方法

IE事件處理常式

• attachEvent
• detachEvent

一個支援各瀏覽器的的事件處理demo

<button id="btn1">按鈕</button><script>    var btn1 = document.getElementById("btn1");    if (btn1.addEventListener){        btn1.addEventListener("click", demo);    } else if (btn1.attachEvent){        btn1.attachEvent("onclick", demo);    } else {        btn1.onclick = demo();    }    function demo() {        alert("Hello");    }</script>

 

JavaScript---事件詳解