使用纯 JS（不是 jQuery）将事件监听器添加到多个输入元素

Question

我有一个在 jQuery 中完美运行的代码块，但它是我正在转换为普通香草 Javascript 的项目的最后一部分，其特定目的是删除对 jQuery 的任何和所有依赖项。

这是有问题的现有代码块：

$("input[data-pattern='comma']").on({
    keyup: function() {inputComma($(this));}
});

如何仅使用普通的纯 JS 实现相同的功能？

注意： inputComma 是一个自定义处理程序，它在用户键入时使每个输入元素实例的值符合以逗号分隔的正则表达式模式。

如果有帮助，我试过...

document.querySelectorAll("input[data-pattern='comma']").forEach(function(elem) {
    elem.addEventListener("keyup", function() {inputComma(elem);});
});

并且...

document.querySelectorAll("input[data-pattern='comma']").forEach(function(elem) {
    elem.addEventListener("keyup", () => {inputComma(elem);});
});

我知道 jQuery 的 $(this) 与“this”不同，箭头函数也会对引用哪个“this”产生重大影响。 我试图通过引用迭代 object 来解决这个问题，但我认为这可能是我的问题的一部分。 如果有办法让它在纯 JS 中工作，不反对使用“this”指针。

在此先感谢您的帮助！

Answer 1

我认为使用事件委托可以更好地做到这一点。 它看起来像：

document.addEventListener(`keyup`, handle);

function handle(evt) {
  if (evt.target.dataset?.pattern === `comma`) {
    return inputComma(evt.target);
  }
}

function inputComma(elem) {...}