JS高级——封装注册事件

Posted 2020-10-22 站错队了同志

兼容性问题

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函数，将它的参数强行注入进去。