如何从另一个函数返回“addEventListener()” - Javascript

Question

我试图让我的代码更短、更优化，并想让它看起来更清晰。

到目前为止，我这样做了：

 function id(a) { return document.getElementById(a); } function cl(a) { return document.getElementsByClassName(a); } function tg(a) { return document.getElementsByTagName(a); } function qs(a) { return document.querySelector(a); } function qa(a) { return document.querySelectorAll(a); }

现在我可以调用qs("#myElement") 。 现在我想将一个事件附加到指定的元素，就像qs("#myElement").addEventListener("click", callBack) 。 这对我很有效。 但是当我尝试这样做时：

 function ev(e, call) { return addEventListener(e, callback); }

然后尝试调用qs("#init-scrap").ev("click", someFunction)然后它弹出以下错误：

Uncaught (in promise) TypeError: qs(...).ev is not a function. . 我不知道有什么问题，我必须尝试方法链吗？ 或者我可以解决这个问题的任何其他方式。

注意：我不想使用任何库或框架，比如 Jquery 等。

Answer 1

只需将元素/节点列表作为第一个参数传入并将侦听器附加到它。

function ev(el, e, call) {
  return el.addEventListener(e, callback);
}

作为替代方案，但不是我推荐的，您可以将ev添加为新的Node原型函数：

 function qs(selector) { return document.querySelector(selector); } if (!Node.prototype.ev) { Node.prototype.ev = function(e, cb) { return this.addEventListener(e, cb); }; } qs('button').ev('click', handleClick); let count = 0; function handleClick() { console.log(count++); }

 <button>Count+=1</button>

注意我只用document.querySelector测试过这个。 您可能需要更改代码以使用document.querySelectorAll等，因为它们不返回单个元素。

Answer 2

如果您希望使用语法qs("#init-scrap").ev("click", someFunction) ，您需要将querySelector返回的对象包装到另一个具有ev函数的对象中。

class jQueryLite {
  constructor(el) {
    this.el = el;
  }

  ev(e, callback) {
    this.el.addEventListener(e, callback);
    return this;
  }
}

qs(a) {
  return new jQueryLite(document.querySelector(a));
}

它被称为 Fluent 界面，如果您想查找它。

Answer 3

您的ev方法中有错误。 它应该是

const ev = document.addEventListener.bind(document);

因此，您可以为实际函数本身设置别名，而不是创建包装原始函数的新函数。

如果您想采用这种方法，您应该对其他别名执行相同的操作。

const qs = document.querySelector.bind(document);
const qa = document.querySelectorAll.bind(document);

我最后的建议是不要给这些方法取别名。 缩写的方法名称会损害代码的可读性。 就代码而言，可读性几乎总是胜过简洁。

Answer 4

我将之前的答案视为灵感并创造了我的看法。

核

const $ = (selector, base = document) => {
  return base.querySelector(selector);
};

Node.prototype.on = function(type, listener) {
  return this.addEventListener(type, listener);
};

• 它支持一个基值，以防你有另一个元素而不是document但它是可选的。
• 我喜欢$和on所以这就是我所用，就像jQuery的。

像下面这样称呼它

$('button').on('click', (e) => {
  console.log(e.currentTarget);
});