標簽 技術分享 alt cti col 兼容性 傳遞 重復 函數返回

註冊事件的方式
1. ele.on事件類型 = function(){} 兼容性最高，但只能綁定一個
2. addEventListener(事件類型,事件處理函數,useCapture) 第三個參數默認是false，冒泡階段執行
3. attachEvent(事件類型，事件處理函數)
1.在註冊事件的時候，判斷瀏覽器的註冊事件的方式，然後直接使用該方式進行註冊事件
復用性太差
2.將註冊事件的代碼封裝到一個函數中
每次調用該函數，都會進行瀏覽器能力檢測
3.在函數中返回函數，讓外部函數只執行一次，判斷也就只會執行一次
使用函數內創建的函數返回給外界，就可以重復使用該函數，進行事件的註冊

//
 
封裝成函數，問題是每次都會判斷 handler處理函數
       function registeEvent(target, type, handler){
           if(target.addEventListener){
               target.addEventListener(type,handler)
           }else if(target.attachEvent){
               target.attachEvent("on"+type,handler)
           }else{
               target[
 
"on"+type] = handler;
           }
       }

//這裏存在問題就是

        //我們使用統一的方式，進行事件註冊

        //1、註冊的事件的處理函數中的，this指向不一致
        //使用addEventListener的方式註冊的點擊事件的回調函數中的this 指向target
        //但是使用attachEvent的方式註冊點擊事件的回調函數中的this 指向window

        //2、3種註冊事件的方式中，回調函數內獲取事件對象的方式也是不一致的
        //要讓他們統一，
        //在第二種的事件註冊方式（attachEvent）中，手動給handler傳遞window.event
 


         function createEventRegister(){
            if(window.addEventListener){
                return function(target, type, handler){
//                    this ---> window
                    target.addEventListener(type,handler)
                    
                }
            }else if(window.attachEvent){
                return function(target, type, handler) {
                    target.attachEvent("on" + type, function(){
                        handler.call(target, window.event);
                    })
                }
            }else{
                return function(target, type, handler) {
                    target["on" + type] = handler;
                }
            }
        }

        var registeEvent = createEventRegister();


        window.onload =function () {
            var div = document.getElementById("div1");
            registeEvent(div,"click",function(e){
                console.log(e);////MouseEvent
                console.log(this); //div標簽內容
                //this---->該事件的觸發對象
                alert("太陽天空照，花兒對我笑，小鳥說：完了")
            })
        }

補充一個小知識

註冊事件兼容