DOM事件模型

浏览器事件模型：

• DOM 0级事件模型
• DOM 2级事件模型

DOM 0级事件模型：

• <input type="button" οnclick="doSomething()" />
• input.οnclick=function(){...}
• event =event||window.event;兼容性问题
• var target=event.target||event.srcElement;

<!--DOM 0级事件模型,只能添加一个处理函数，后面添加的就会把前面的覆盖-->
<p id="example" onclick="console.log('Click')">

</p>

<script>
    document.getElementById('example').onclick=function(event){
        console.log('click me')
    }
</script>

事件冒泡：当我们点击最内层的元素时，四个事件的处理函数都被执行了。事件模型会依次检查父元素，一层一层往上检查，看看有没有事件处理函数。有的话事件处理函数会依次触发。从子元素一直触发到父元素。

</p>
<div id="p1">
    <div id="p1-1">
        <div id="p1-1-1">
            <div id="p1-1-1-1">
                <p>
                    DOM 0级事件模型,只能添加一个处理函数，后面添加的就会把前面的覆盖DOM 0级事件模型,只能添加一个处理函数，后面添加的就会把前面的覆盖DOM 0级事件模型,只能添加一个处理函数，后面添加的就会把前面的覆盖DOM 0级事件模型,只能添加一个处理函数，后面添加的就会把前面的覆盖DOM 0级事件模型,只能添加一个处理函数，后面添加的就会把前面的覆盖
                </p>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script>
    document.getElementById('p1').onclick=function(event){
        console.log('click p1')
    }
    document.getElementById('p1-1').onclick=function(event){
        console.log('click p1-1')
    }
    document.getElementById('p1-1-1').onclick=function(event){
        console.log('click p1-1-1')
    }
    document.getElementById('p1-1-1-1').onclick=function(event){
        console.log('click p1-1-1-1')
    }
</script>

阻止事件冒泡：

<script>
    document.getElementById('p1').onclick=function(event){
        console.log('click p1')
    }
    document.getElementById('p1-1').onclick=function(event){
        console.log('click p1-1')
    }
    document.getElementById('p1-1-1').onclick=function(event){
        console.log('click p1-1-1')
    }
    document.getElementById('p1-1-1-1').onclick=function(event){
        /*event.stopPropagation();*/
        event.cancelBubble=true;
        console.log('click p1-1-1-1')
    }
</script>

DOM 0级事件模型最大的缺陷就是只支持一个DOM事件处理函数。

DOM 2级事件模型改进了DOM 0级事件模型的缺陷。

• addEventListener(eventType,listener,useCapture)注册事件处理函数。eventType事件类型，减去了onXXX().
• attachEvent(eventName,handler)  ie9以前的浏览器没有完全支持DOM 2级事件模型有自己机制。

//三个事件处理函数都执行了，而且是依次执行。不会互相覆盖。DOM 2级事件模型比0好的地方。
<!--DOM 0级事件模型,只能添加一个处理函数，后面添加的就会把前面的覆盖-->
<p id="example">
    DOM 0级事件模型,只能添加一个处理函数，后面添加的就会把前面的覆盖DOM 0级事件模型,只能添加一个处理函数，
</p>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script>
    var element=document.getElementById('example');
    element.addEventListener('click',function(event){
        console.log('Click');
    },false);
    element.addEventListener('click',function(event){
        console.log('Click2');
    },false);
    element.addEventListener('click',function(event){
        console.log('Click3');
    },false);
</script>

 

<!--DOM 0级事件模型,只能添加一个处理函数，后面添加的就会把前面的覆盖-->
<p id="example">
    DOM 0级事件模型,只能添加一个处理函数，后面添加的就会把前面的覆盖DOM 0级事件模型,只能添加一个处理函数， DOM 0级事件模型,只能添加一个处理函数，后面添加的就会把前面的覆盖DOM 0级事件模型,只能添加一个处理函数， DOM 0级事件模型,只能添加一个处理函数，后面添加的就会把前面的覆盖DOM 0级事件模型,只能添加一个处理函数，
</p>
<div id="p1">
    <div id="p1-1">
        <div id="p1-1-1">
            <div id="p1-1-1-1">
                <p>
                    DOM 0级事件模型,只能添加一个处理函数，后面添加的就会把前面的覆盖DOM 0级事件模型,只能添加一个处理函数，后面添加的就会把前面的覆盖DOM 0级事件模型,只能添加一个处理函数，后面添加的就会把前面的覆盖DOM 0级事件模型,只能添加一个处理函数，后面添加的就会把前面的覆盖DOM 0级事件模型,只能添加一个处理函数，后面添加的就会把前面的覆盖
                </p>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script>
    
    //false只执行冒泡的过程，没有执行捕获的过程。所以从子元素依次往上。一直到祖先元素。
    
    document.getElementById('p1').addEventListener('click',function(event){
        console.log('Click p1');
    },false);
    document.getElementById('p1-1').addEventListener('click',function(event){
        console.log('Click p1-1');
    },false);
    document.getElementById('p1-1-1').addEventListener('click',function(event){
        console.log('Click p1-1-1');
    },false);
    document.getElementById('p1-1-1-1').addEventListener('click',function(event){
        console.log('Click p1-1-1-1');
    },false);
   
</script>

<script>

    //true成为事件捕获的过程而不是事件冒泡。

    document.getElementById('p1').addEventListener('click',function(event){
        console.log('Click p1');
    },true);
    document.getElementById('p1-1').addEventListener('click',function(event){
        console.log('Click p1-1');
    },true);
    document.getElementById('p1-1-1').addEventListener('click',function(event){
        console.log('Click p1-1-1');
    },true);
    document.getElementById('p1-1-1-1').addEventListener('click',function(event){
        console.log('Click p1-1-1-1');
    },true);

</script>

如果我们即想实现捕获又想实现冒泡：

<script>

    document.getElementById('p1').addEventListener('click',function(event){
        console.log('Click p1');
    },false);
    document.getElementById('p1-1').addEventListener('click',function(event){
        console.log('Click p1-1');
    },false);
    document.getElementById('p1-1-1').addEventListener('click',function(event){
        console.log('Click p1-1-1');
    },false);
    document.getElementById('p1-1-1-1').addEventListener('click',function(event){
        console.log('Click p1-1-1-1');
    },false);

    document.getElementById('p1').addEventListener('click',function(event){
        console.log('Click p1');
    },true);
    document.getElementById('p1-1').addEventListener('click',function(event){
        console.log('Click p1-1');
    },true);
    document.getElementById('p1-1-1').addEventListener('click',function(event){
        console.log('Click p1-1-1');
    },true);
    document.getElementById('p1-1-1-1').addEventListener('click',function(event){
        console.log('Click p1-1-1-1');
    },true);

</script>

老的浏览器只支持冒泡不支持捕获。attachEvent(eventName,handler) 。

 //兼容性问题
    removeEvent:function(element,type,callback){
        if(typeof removeEventListener !=='undefined'){
            element.removeEventListener(type,callback,false);
        }else if(typeof DetachEvent !=='undefined'){
            element.detachEvent('on'+type,callback);
        }else{
            element['on'+type]=null;
        }
    }