兼容性問題

1、ele.on事件類型 = function(){}一個元素ele註冊一種事件多次，會被替換成最後一個，所以有局限性

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

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

4、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>

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

解決方案：

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

2、外部函數只需要調用一次就可以知道客戶瀏覽器的兼容方式是什麽，然後利用這次返回的函數，註冊事件，可以重復的註冊

<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函數，將它的參數強行註入進去。

JS高級——封裝註冊事件