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>