模拟jQuery--获取事件的封装

Posted 2020-06-23

从使用jQuery到写原声js，逐步到自己封装框架。敲出我的模拟jQuery路程~~~satar

封装我们的绑定事件以及解除绑定事件————兼容ie低版本

$ = {
    //绑定事件
    on: function (dom, type, fn) {
        var dv = document.getElementById(dom);
        if (document.addEventListener) {
            //标准组织
            dv.addEventListener(type, fn, false);
        } else {
            //ie
            if (document.attachEvent) {
                dv.attachEvent(‘on‘ + type, fn);
            }
        }
    },
    //解除绑定
    un: function (id, type, fn) {
        var dv = document.getElementById(id);
        //标准组织
        if (document.removeEventListener) {
            dv.removeEventListener(type, fn, false);
        } else {
            //ie
            if (document.detachEvent) {
                dv.detachEvent(‘on‘ + type, fn);
            }
        }
    },
    //click单击事件
    click: function (id, fn) {
        this.on(id, ‘click‘, fn)
    },

    //mouseover鼠标经过事件
    mouseover: function (id, fn) {
        this.on(id, ‘mouseover‘, fn)
    },

    //mouseout鼠标离开事件
    mouseout: function (id, fn) {
        this.on(id, ‘mouseout‘, fn)
    }
}