JavaScript-事件模型

這次主要是向大家介紹一下瀏覽器的事件模型，主要分爲兩類：DOM第0級事件模型和DOM第2級事件模型。

• DOM第0級事件模型：在特定的DOM元素上的任何一個事件類型都只能有一個監聽器；
• DOM第2級事件模型：一個事件類型可以有多個監聽器

代碼如下：

1、DOM第0級事件模型

1> 第一種方式

<div id="div1" onclick="test"></div>//直接將事件綁定在元素標籤上,test函數爲自定義函數
<script>
    window.onload = function(){
        function test(){
            console.log("test");
        }
    }
</script>

2> 第二種方式

使用這種方式給同一個DOM元素綁定多個函數處理器時，後邊的將會覆蓋前邊的函數處理器，最終的輸出結果就是最後一個函數處理器所要輸出的結果。

<script>
    window.onload = function(){
        var divObj = document.getElementById("div1");
        divObj.onclick = function(){
            console.log(1);
        }
        divObj.onclick = function(){
            console.log(2);
        }
    }
</script>

2、DOM第2級事件模型

標準的DOM第2級事件模型addEventListener方法只支持標準的瀏覽器：Firefox、Chrome、Opera等，爲了兼容IE瀏覽器，需要使用IE瀏覽器的attachEvent 方法來實現

代碼如下：

使用這種方式綁定事件時，不論有幾個函數處理器，都可以正常執行

<script>
    window.onload = function(){
        var obj = document.getElementById("div");
        if(obj.addEventListener){
            div.addEventListener("click",function(){
                console.log(1);
            },true)
            div.addEventListener("click",function(){
                console.log(2);
            },false)
        }else if(obj.attachEvent){
            div.attachEvent("onclick",function(){
                console.log("IE");
            })
        }else{
            div.onclick = function(){
                console.log("DOM")
            }
        }

    }
</script>