事件兼容性封装

Posted 萧诺

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了事件兼容性封装相关的知识,希望对你有一定的参考价值。

function event(){

if(window.addEventListener) {
                        this.addEventListener("click", handler);
                    } else if(window.attachEvent) {
                        this.attachEvent("onclick", handler);
                    } else {
                        // this.onclick = handler;
                        // 思路:
                        // 1 先判断有没有绑定过事件
                        // 2 如果没有绑定直接赋值
                        // 3 如果绑定过了
                        //         3.1 先将绑定的事件保存起来
                        //         3.2 调用事件:先调用已经绑定的事件,再调用当前绑定的事件

                        var oldFn = this.onclick;
                        // 事件没有绑定过,那么就是null,否则就是 function
                        if(typeof oldFn !== "function") {
                            this.onclick = handler;
                        } else {
                            // 已经绑定过事件了
                            this.onclick = function() {
                                oldFn();
                                handler();
                            };
                        }
                    
}

 

以上是关于事件兼容性封装的主要内容,如果未能解决你的问题,请参考以下文章

JS高级——封装注册事件

Reactreact概述组件事件

简单封装事件处理程序,兼容浏览器

封装addEventListener,removeEventListener指定元素添加事件及兼容问题js

封装addEventListener,removeEventListener指定元素添加事件及兼容问题js

VSCode自定义代码片段14——Vue的axios网络请求封装