如何自定义JS函数on_cl简化点击事件绑定代码？

你想要的on_cl('#id'){...}这种直接跟代码块的写法，在原生JavaScript里是不支持的——JS语法不允许函数调用后直接接独立代码块。不过我们可以实现功能完全等价的简写方案，下面是两种实用的实现方式：

基础实现（最简洁） #

直接让on_cl接收选择器和回调函数两个参数，内部自动完成元素选择和点击事件绑定：

function on_cl(selector, callback) {
  const element = document.querySelector(selector);
  if (element) {
    element.addEventListener('click', callback);
  } else {
    console.warn(`找不到选择器匹配的元素：${selector}`);
  }
}

调用方式 #

on_cl('#id', () => {
  // 这里写你的点击逻辑
});

on_cl('.class', () => {
  // 这里写你的点击逻辑
});

贴近你预期写法的实现 #

如果想更接近你设想的语法结构，可以用链式调用的方式，让on_cl返回一个带执行方法的对象：

function on_cl(selector) {
  const element = document.querySelector(selector);
  return {
    run: function(callback) {
      if (element) {
        element.addEventListener('click', callback);
      } else {
        console.warn(`找不到选择器匹配的元素：${selector}`);
      }
    }
  };
}

调用方式 #

on_cl('#id').run(() => {
  // 这里写你的点击逻辑
});

两种实现都完全等价于你原来重复编写的querySelector+addEventListener代码，还额外增加了元素不存在时的警告提示，避免静默错误。

内容的提问来源于stack exchange，提问作者danik0011