如何制作自定义 JS 函数？

Question

这是我正在尝试做的事情的想法 - 自定义速记：

on_cl('#id' /* or .class instead of #id */){
  // insert code here
}

，不要一遍又一遍地粘贴：

document.querySelector('#id' /* or .class */).addEventListener('click', () => {
  // insert code here
})

.基本上，这两段代码应该是等价的。

我该怎么做？

我在 MDNdocs 上搜索了答案，但没有找到我想要的。

Answer 1

如果你想要一个已经存在的方法的快捷方式，你需要在新函数的参数中传递你编写原始方法所需的一切。在您的情况下，您需要选择器和事件的回调，因此该函数应如下所示：

function on_cl(selector, eventCallback){
  document.querySelector(selector).addEventListener('click', eventCallback)
}

这样称呼它：

on_cl('#id', () => {
  /// your callback
}); 

---

编辑：

正如 David Thomas 在评论中建议的那样，也可以更改要收听的事件。

在函数

on_cl

中，唯一要监听的事件是“点击”。这可以通过将其作为函数的参数传递来更改

function on_event(selector, eventType, eventCallback){
  document.querySelector(selector).addEventListener(eventType, eventCallback)
}

on_event('#id', 'click', () => {
  /// your callback
}); 

如果需要，您可以为每个需要收听的事件创建多个快捷方式，如下所示：

function on_click(selector, eventCallback){
  on_event(selector, "click", eventCallback);
}

function on_mouse_up(selector, eventCallback){
  on_event(selector, "mouseup", eventCallback);
}

// etc...