DIV CSS 佈局教程網

DOM 事件流詳解
編輯:JavaScript基礎知識     

1.冒泡型事件

浏覽器的事件模型分兩種:捕獲型事件和冒泡型事件。由於ie不支持捕獲型事件,所以以下主要以冒泡型事件作為講解。
(dubbed bubbling)冒泡型指事件安裝最特定的事件到最不特定的事件逐一觸發。

復制代碼 代碼如下:
    <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>

以上三個函數都添加了onclick函數,單機p元素後三個函數都觸發,先執行了p元素,再執行了div,最後執行了body

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

2.事件監聽

一個事件都需要函數來響應,這類函數通常稱為事件處理函數(enent  handler),從另外一個角度看,這些函數都在實時監聽著是否有事件發生,通常稱為事件監聽函數(enevt listener),事件監聽函數對於不同的浏覽器區別較大。

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

復制代碼 代碼如下:
<body>
<div id="me">click</div>
<script type="text/javascript">
var opp = document.getElementById("me"); //找到事件
opp.onclick = function(){                   //設置事件函數
    alert("我被點擊了!")
}
</script>
</body>

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

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

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

復制代碼 代碼如下:
<script type="text/javascript">
            function fnclick() {
                alert("我被點擊了!");
                oP.detachEvent("onclick","fnclick");
            }
            var oP;
            window.onload = function() {
                oP = document.getElementById("oop"); //找到對象
                oP.attachEvent("onclick","fnclick"); //添加監聽函數       

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

            </p>
        </div>

iii.添加多個監聽事件(ie)

復制代碼 代碼如下:
<script language="javascript">
function fnClick1(){
    alert("我被fnClick1點擊了");
}
function fnClick2(){
    alert("我被fnClick2點擊了");
    //oP.detachEvent("onclick",fnClick1);        //刪除監聽函數1
}
var oP;
window.onload = function(){
    oP = document.getElementById("myP");    //找到對象
    oP.attachEvent("onclick",fnClick1);        //添加監聽函數1
    oP.attachEvent("onclick",fnClick2);        //添加監聽函數2
}
</script>
</head>

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

 3.標准DOM事件監聽

與ie的兩個方法對於,標准DOM也使用兩個方法分別添加和刪除監聽函數。即addEventListener(),和removeEventListener()

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

復制代碼 代碼如下:
[object].addEventListener("event_name",fnHandler,bCapture);
[object].removeEventListener("event_name",fnHandler,bCapture);

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

另外第三個參數bCapture通常設置為false,冒泡階段。

標准dom的事件監聽方法:

復制代碼 代碼如下:
    <script language="javascript">
            function fnClick1() {
                alert("我被點擊了1");
                oP.removeEventListener("click", fnClick1, false);
            }

            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>

具體的執行順序大家可測試。

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved