IE事件模型與標準模型的兼容

時間 2019-11-20

標籤事件模型標準模型兼容简体版

原文原文鏈接

IE與W3C事件模型的幾個不一樣點（針對於IE6,7,8版本）
1.綁定函數不同,IE中庸attachEvent,detachEvent,事件必須加on ,IE中必須加on,而W3C不須要
2.IE7，8 中有個毛病，先綁定的事件後發生（隨機）,綁定事件中，W3C中this指向對象自己，而IE指向window變量,
3.IE6模型中部支持捕捉模型，只支持冒泡，事件對象不同，W3C中，對象事件自動傳入函數的第一個參數，而在IE中，事件對象是window.event屬性值，IE6，7，8已經支持自動傳入事件對象。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE事件模型與標準模型的兼容</title>
<style>

</style>
<script type="text/javascript">
    /**
     * IE與W3C事件模型的幾個不一樣點（針對於IE6,7,8版本）
     *1.綁定函數不同,IE中庸attachEvent,detachEvent,事件必須加on ,IE中必須加on,而W3C不須要
     *2.IE7，8 中有個毛病，先綁定的事件後發生（隨機）,綁定事件中，W3C中this指向對象自己，而IE指向window變量,
     *3.IE6模型中部支持捕捉模型，只支持冒泡，事件對象不同，W3C中，對象事件自動傳入函數的第一個參數，而在IE中，事件對象是window.event屬性值，IE6，7，8已經支持自動傳入事件對象。
     */
    /**
     * 封裝兼容IE的事件模型
     */
    function addEvent(obj,type,event,mode){
        //將IE綁定的時間塞入數組中，經過數組來執行函數
        if(!obj[('__'+type)]){
            obj[('__'+type)]=[];
        }
        obj[('__'+type)].push(event);
        if(!obj[('on'+type)]){
            //將其付給一個自定義的函數
            obj[('on'+type)]=function(){
                //經過數組一次調用函數
                for(var len=obj[('__'+type)].length,i=0; i<len;i++){
                    obj[('__'+type)][i].apply(obj);
                }
            }
        }
        /*if(obj.attachEvent()){

            obj.attachEvent('on'+type,event,mode);
        }else{
            obj.addEventListener(tyoe,event,mode);
        }*/
    }
    window.onload=function(){
        var button=document.getElementById("submit");
        addEvent(button,'click',function(){

            this.style.backgroundColor='red';
        },false);
    }
</script>
</head>
<body>
<input type="button" id="submit" value="點擊"/>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。