JQuery的.on()函数的纯Javascript替代品

Pure Javascript alternative to JQuery's .on() function

本文关键字:Javascript 替代品 函数 on JQuery      更新时间:2023-09-26

我写了一个小型的纯JavaScript库来替换JQuery(保持语法与JQuery相同,但代码javascript)。 当我将事件对象传递给它时,我正在努力让 .on 函数正常工作,因为事件没有传回(以防我想防止冒泡)。

第一组代码是我的库:

(function () {
var Q = function (params) {
    return new Library(params);
};
var Library = function (params) {
    if (typeof params === 'string') {
        var selector = document.querySelectorAll(params),
            counter;
        this.length = selector.length;
        // Add selector to object for method chaining
        for (counter = 0; counter < this.length; counter++) {
            this[counter] = selector[counter];
        }
    } else {
        this.length = 1;
        this[0] = params;
    }
    // Return as object
    return this;        
};
 
Q.fn = Library.prototype = {
    /*
        Name            addClass()
        Description     Adds a class to the objects
        Input           className TEXT
        Language        Javascript
    */
    addClass: function (classNames) {
        var arr = classNames.split(' '),
            total = arr.length,
            counter,
            count;
        for (counter = 0; counter < this.length; counter++) {
            for (count = 0; count < total; count++) {
                if (!this[counter].classList.contains(arr[count])) {
                    this[counter].classList.add(arr[count]);
                }
            }
        }
        // Return this to allow chained methods
        return this;
    },
     on: function (events) {
        var arr = events.split(' '),
            total = arr.length,
            counter,
            count;
        if (arguments.length === 2) {
            // .on('change', function(e) { ... });
            for (counter = 0; counter < this.length; counter++) {
                for (count = 0; count < total; count++) {
                    this[counter].addEventListener(arr[count], arguments[1], false);
                }
            }
        } else {
            // .on('change', 'input', function(e) { ... });
            var doc = document,
                selector = arguments[1],
                func = arguments[2],
                counter;
            for (counter = 0; counter < this.length; counter++) {
                var obj = this[counter];
                if (isset(obj)) {
                    for (count = 0; count < total; count++) {
                        doc.addEventListener(arr[count], function() {
                            if (arguments[0].target.matches(obj.tagName + ' ' + selector)) {
                                func.call(arguments[0].target, arguments[0]);
                            }
                        }, false);
                    }
                }
            }
        }
        // Return this to allow chained methods
        return this;
    },
};   
// Assign our Q object to global window object.
if (!window.Q) {
    window.Q = Q;
}
})();

当我在代码中使用以下代码时,一切正常,但返回的事件不包含更新的属性:

 Q(obj).on('click', 'a', function(e) {
    e.stopPropagation();
});

我很乐意分享更多信息,并提前感谢您的帮助。

如果我正确阅读代码,那是因为当您调用回调时

func.call(arguments[0].target, arguments[0]);

您不传递事件