模仿jQuery's .click()的原生JavaScript方法

Native JavaScript Method that Mimics jQuery's .click()

本文关键字：原生 JavaScript 方法 click jQuery 模仿      更新时间：2023-09-26

我最近意识到，在学习使用jQuery编写JavaScript时，我学习了JS语法，但我从未真正学习过JS。所以这里的项目是只使用原生JavaScript模拟jQuery方法。

我从全局窗口对象的一个函数开始，它返回一组我常用的方法:

window.iq = (function(){
    return {
    id: function(id) {
            return document.getElementById(id);
    },
    // Several other similar methods
})();

那么，现在我可以像这样调用这个方法:

iq.id('elementID') //and so forth

我在写模仿jQuery的.click()的方法时遇到了麻烦。我可以将点击处理程序附加到一组元素，如下所示:

[].forEach.call(iq.selAll('a'), function(el) { // selAll is the short version of document.querySelectorAll()
    el.addEventListener('click', function(){
        // do stuff
    });

我还没能弄清楚如何编写一个方法来做到这一点，所以每次我想在一个元素或一组元素上触发一个点击事件时，我可以只写:

iq.click('element', function(){
    // do stuff
});

这是我的非工作尝试:

click: function(el) {
    return [].forEach.call(iq.selAll(el), function(el) {
        el.addEventListener('click');
    });
}
如往常一样，我非常感谢任何建议或指导。

您的代码缺少click方法的第二个参数，这是实际的处理程序函数:

click: function(el, handler) {
    return [].forEach.call(iq.selAll(el), function(el) {
        el.addEventListener('click', handler, false);
    });
}
相关文章：