JS高級——封裝註冊事件

兼容性問題

一、ele.on事件類型 = function(){}一個元素ele註冊一種事件屢次，會被替換成最後一個，因此有侷限性

二、addEventListener(事件類型,事件處理函數,useCapture) 第三個參數默認是false，冒泡階段執行

三、attachEvent(事件類型，事件處理函數)

四、addEventListener、attachEvent在IE兼容性問題上正好能夠互補

基本函數封裝

<script>
    //封裝成函數，問題是每次都會判斷
    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;
        }
    }
</script>

在註冊事件的時候，判斷瀏覽器的註冊事件的方式，而後直接使用該方式進行註冊事件，就像上面那樣，代碼複用性差

解決方案：

一、將註冊事件的代碼封裝到一個函數中，在函數中返回函數，讓外部函數只執行一次，判斷也就只會執行一次

二、外部函數只須要調用一次就能夠知道客戶瀏覽器的兼容方式是什麼，而後利用此次返回的函數，註冊事件，能夠重複的註冊

<script>
    function createEventRegister(){
        if(window.addEventListener){
            return function(target, type, handler){
                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;
            }
        }
    }
    window.onload =function () {
        var div = document.getElementById("div1");
        registeEvent(div,"click",function(e){
            console.log(e);
            console.log(this);
        })
    }
</script>

須要注意的是IE6的時候只能使用attachEvent來解決兼容性問題，可是attachEvent，是不可以在註冊的函數中傳入的參數event對象的，它的訪問形式都是window.event，此時咱們能夠使用call方法，修改傳入參數handler函數，將它的參數強行注入進去。