【JavaScript框架封装】实现一个类似于JQuery的事件框架的封装

版权声明：本文为博主原创文章，未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81123753

// 事件框架
(function (xframe) {
    // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法)
    xframe.extend({
        /**
         * 实现一个浏览器的基本事件的绑定
         * @param type
         * @param fn
         * @return {on}
         */
        on: function (type, fn) {
            // 注意这里的初始的下标编号是长度减一
            var i = this.length - 1;
            // 可以实现兼容版本的IE浏览器和W3c浏览器的支持
            if (document.addEventListener) {
                // w3c(这里使用的方式是从后向前遍历， 使得每一个DOM加载完毕之后再去添加事件)
                for (; i >= 0; i--) {
                    this[i].addEventListener(type, fn, false);
                }
            } else if (document.attachEvent) {
                // IE
                for (; i >= 0; i--) {
                    this[i].attachEvent('on' + type, fn);
                }
            } else {
                // 其他的浏览器
                for (; i >= 0; i--) {
                    // 获取json数据的两种方式，绑定事件的方式也可以
                    this[i]['on' + type] = fn;
                }
            }
            return this;
        },
        /**
         * 实现事件的解除绑定
         * @param type
         * @param fn
         * @return {un}
         */
        un: function (type, fn) {
            // 注意这里的初始下标编号
            var i = this.length - 1;
            if (document.removeEventListener) {
                // W3c
                for (; i >= 0; i--) {
                    this[i].removeEventListener(type, fn, false);
                }
            } else if (document.detachEvent) {
                // IE浏览器
                for (; i >= 0; i--) {
                    this[i].detachEvent(type, fn);
                }
            } else {
                // 其他浏览器的话，就直接默认绑定的所有事件置为null
                for (; i >= 0; i--) {
                    // 移出所有绑定的事件
                    this[i]['on' + type] = null;
                }
            }
            return this;

        },
        /**
         * 实现单个元素的事件绑定
         * @param fn
         * @return {click}
         */
        click: function (fn) {
            this.on('click', fn);
            return this;

        },
        /**
         * 实现鼠标移动进来和出去的事件响应（鼠标悬浮事件）
         * @param fnOver
         * @param fnOut
         * @return {hover}
         */
        hover: function (fnOver, fnOut) {
            var i = this.length;
            // 还是采用的是从后向前遍历的方式
            for (; i >= 0; i--) {
                if (fnOver && typeof fnOver === 'function') {
                    this.on('mouseover', fnOver);
                }
                if (fnOut && typeof  fnOut === 'function') {
                    this.on('mouseout', fnOut);
                }
            }
            return this;
        },
        /**
         * 如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。
         * toggle方法,切换,接收任意个参数,不断在参数间循环.例:点击显示隐藏
         * @return {toggle}
         */
        toggle: function () {
            // 实现一个事件的切换f1, f2
            var self = this,
                _arguments = arguments,
                i = 0,
                len = this.length;


            // 把所有的事件响应函数存起来
            for (; i < len; i++) {
                addToToggle(this[i]);
            }


            /**
             * 鼠标点击之后逐个调用自己绑定的事件
             * @param obj
             */
            function addToToggle(obj) {
                // 定义一个私有的计数器
                var count = 0;
                // 添加事件
                self.on('click', function () {
                    // 使用call去修改this的指向(这里的主要作用是去切换，轮巡切换状态)
                    _arguments[count++ % _arguments.length].call(obj);
                });
            }

            return this;
        }
    });

    // 不需要参与链式访问的
    xframe.extend(xframe, {
        /**
         * 获取事件对象
         * @param event
         * @return {Event}
         */
        getEvent: function (event) {
            return event ? event : window.event;
        },
        /**
         * 获取触发事件的元素
         * @param event
         * @return {*|Element|Object}
         */
        getTarget: function (event) {
            var event = this.getEvent(event);
            return event.target || event.srcElement;
        },
        /**
         * 阻止事件冒泡
         * @param event
         */
        stopPropagation: function (event) {
            var event = this.getEvent(event);
            if (event.stopPropagation) {
                // W3c
                event.stopPropagation();
            } else {
                // IE
                event.cancelBubble = true;
            }
        },
        /**
         * 阻止默认的行为
         * @param event
         */
        preventDefault: function (event) {
            var event = this.getEvent(event);
            if (event.preventDefault) {
                // w3c
                event.preventDefault();
            } else {
                // IE
                event.returnValue = false;
            }
        },
        /**
         * 获取鼠标滚轮的运动的详细信息
         * @param event
         * @return {*}
         */
        getDelta: function (event) {
            var event = this.getEvent(event);
            if (event.wheelDelta) {
                // w3c
                return event.wheelDelta;
            } else {
                // ie
                // Firefox的值有所不同，因此首先要将这个值的符号反向，然后再乘以40，就可以保证与其它浏览器的值相同了
                return -event.detail * 40;
            }
        }
    });
})(xframe);