DOM 事件流詳解

更新時間：2015年01月20日 10:19:53 投稿：hebedich

這篇文章主要詳細介紹了DOM中的事件流，包括冒泡型事件、事件監(jiān)聽、標準DOM事件監(jiān)聽這三個方面，十分詳細，推薦給大家。

1.冒泡型事件

瀏覽器的事件模型分兩種：捕獲型事件和冒泡型事件。由于ie不支持捕獲型事件，所以以下主要以冒泡型事件作為講解。
（dubbed bubbling）冒泡型指事件安裝最特定的事件到最不特定的事件逐一觸發(fā)。

    <body onclick="add('body<br>')">
        <div onclick="add('div<br>')">
            <ponclick="add('p<br>')"> click me</p>
        </div>
    </body>
    <div id="display">

    </div>
    <script type="text/javascript">
        function add(sText) {
            var ulo = document.getElementById("display");
            ulo.innerHTML += sText;
        }
    </script>

以上三個函數(shù)都添加了onclick函數(shù)，單機p元素后三個函數(shù)都觸發(fā)，先執(zhí)行了p元素，再執(zhí)行了div，最后執(zhí)行了body

這這里順便提醒下捕獲型事件，它的順序正好和冒泡型事件相反。

2.事件監(jiān)聽

一個事件都需要函數(shù)來響應，這類函數(shù)通常稱為事件處理函數(shù)（enent handler），從另外一個角度看，這些函數(shù)都在實時監(jiān)聽著是否有事件發(fā)生，通常稱為事件監(jiān)聽函數(shù)(enevt listener),事件監(jiān)聽函數(shù)對于不同的瀏覽器區(qū)別較大。

i.通用監(jiān)聽方法，比如使用onclick方法，幾乎每個標簽都支持此方法。而且瀏覽器兼容性都很高
考慮到行為，事件分離。
一般使用使用以下方式進行監(jiān)聽

復制代碼代碼如下:

<body>

<div id="me">click</div>

<script type="text/javascript">

var opp = document.getElementById("me"); //找到事件

opp.onclick = function(){                   //設置事件函數(shù)

    alert("我被點擊了！")

}

</script>

</body>

以上介紹的兩者方法都十分便捷，在制作處理一些小功能時都被光大開發(fā)者所喜愛。但對于同一個事件。他們都只能添加一個函數(shù)，列如對于p標記的onclick函數(shù)，利用這兩種方法都只能有一個函數(shù)，因此，ie有自己的解決辦法，同事，標準的dom則規(guī)定了另外一種方法。

ii.IE中的監(jiān)聽方法
早ie瀏覽器中，每個元素都有兩個方法來處理時間的監(jiān)聽。
分別是attachEvent()和detachEnevt()。
從它們的函數(shù)名稱就能看出來，attachEnevt()是用來給某個元素添加事件處理的函數(shù)，而detachEvent()則是用來刪除元素上的監(jiān)聽函數(shù)。它們的語法如下：

[object].attachEvent("enevt_handler","fnHandler");
[object].detachEvent("enevt_handler","fnHandler");
其中enevt_handler代表常用的onclick , onload, onmouseover等
fnHandler是監(jiān)聽函數(shù)的名稱。
上一節(jié)事件中可以使用attachEvent()方法替代添加監(jiān)聽函數(shù)，當單擊了一下，可以使用detachEvent()刪除監(jiān)聽函數(shù)，使其下次單擊后再不執(zhí)行。

復制代碼代碼如下:

            }
        </script>
        <div>
            <p id="oop">

</p>
</div>

iii.添加多個監(jiān)聽事件（ie）

復制代碼代碼如下:

<body>
    <div>
        <p id="myP">Click Me</p>
    </div>

3.標準DOM事件監(jiān)聽

與ie的兩個方法對于，標準DOM也使用兩個方法分別添加和刪除監(jiān)聽函數(shù)。即addEventListener()，和removeEventListener()

與ie不同，這兩個函數(shù)接受3個參數(shù)，即事件的名稱，要分配的函數(shù)名和是用于冒泡階段還是捕獲階段。捕獲階段的參數(shù)為true，冒泡階段參數(shù)為false.語法如下：

復制代碼代碼如下:

[object].addEventListener("event_name",fnHandler,bCapture);

[object].removeEventListener("event_name",fnHandler,bCapture);

這兩個函數(shù)的使用方法和ie基本類似，只不過要注意，event_name的名稱是“click”，“mouseover”等，而不是Ie中的“onclick”，“onmouseover”。

另外第三個參數(shù)bCapture通常設置為false，冒泡階段。

標準dom的事件監(jiān)聽方法：

復制代碼代碼如下:

            function fnClick2() {
                alert("我被點擊了2");
            }

            window.onload = function() {
                oP = document.getElementById("myP");
                oP.addEventListener("click", fnClick1, false);
                oP.addEventListener("click", fnClick2, false);
            }
        </script>
        <div>
            <p id="myP">Click Me</p>
        </div>

具體的執(zhí)行順序大家可測試。

以上就是本文的全部內容了，希望大家能夠喜歡。

您可能感興趣的文章: