如何用纯JavaScript获取class为div1的点击元素的custom-id并绑定事件？

嘿，我来帮你搞定这两个JavaScript问题，咱们一步步来：

其实很简单，当元素被点击时，触发的事件对象（通常用event或e指代）里的target属性就是触发点击的那个元素。你直接通过event.target.id就能拿到它的id。另外，如果是直接给元素绑定onclick事件，用this.id也能实现，但要注意箭头函数里this的指向会变化，所以用事件对象的方式更稳妥。

给你举个实际例子：

<button id="myTestBtn">点我试试</button>

<script>
document.getElementById('myTestBtn').onclick = function(e) {
  console.log('点击元素的id是：', e.target.id); // 输出 myTestBtn
  // 也可以用this
  console.log('点击元素的id是：', this.id); // 同样输出 myTestBtn
};
</script>

如果是给多个元素批量绑定（比如用事件委托），这个方法也能准确拿到触发点击的元素id。

首先假设你的HTML结构大概是这样（如果和你的实际代码有出入，调整选择器即可）：

<div class="div1" custom-id="div-001">第一个div1</div>
<div class="div1" custom-id="div-002">第二个div1</div>
<div class="div1" custom-id="div-003">第三个div1</div>
<div class="other-div">非div1类的元素</div>

下面提供两种实现思路，按需选择：

方式一：给每个div1元素单独绑定事件 #

适合元素数量固定且不多的场景：

function getDivCustomId(e) {
  // 获取当前点击元素的custom-id值
  const customId = e.target.getAttribute('custom-id');
  // 小提示：如果改成HTML标准的自定义属性（比如data-custom-id），可以用e.target.dataset.customId获取，更规范
  console.log('点击的div1的custom-id：', customId);
  return customId; // 返回目标值
}

// 获取所有class为div1的元素
const div1List = document.querySelectorAll('.div1');
// 遍历绑定点击事件
div1List.forEach(div => {
  div.onclick = getDivCustomId;
});

方式二：事件委托（推荐） #

如果div1元素是动态生成的，或者数量很多，事件委托只需要给父元素绑定一次事件，性能更优：

// 这里用body作为父容器，你可以换成实际的父元素选择器
document.body.onclick = function(e) {
  // 判断点击的元素是否包含div1类
  if (e.target.classList.contains('div1')) {
    const customId = e.target.getAttribute('custom-id');
    console.log('点击的div1的custom-id：', customId);
    return customId;
  }
  // 点击非div1元素时不做处理
};

这里要注意：用classList.contains('div1')判断类名比直接比较className更可靠，因为元素可能同时拥有多个类名。

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