如何给容器div添加JavaScript onclick事件监听器

问题核心原因 #

事件无法触发有两个核心诱因：

1. CSS层级设置错误：.barContainer 配置了 z-index: -1，结合其position: relative属性，会让整个容器被置于页面常规内容的下方，点击动作会被上层元素拦截，无法触发该容器的绑定事件。
2. JS执行时机提前：如果JS代码放置在DOM元素渲染之前执行，document.getElementById会找不到目标元素，导致事件绑定失败。

修复方案 #

第一步 调整CSS层级

删除.barContainer的z-index: -1配置，或调整为大于等于0的值即可，不需要改动其他样式逻辑：

.barContainer {
  margin: 2px;
  border: 2px solid black;
  border-radius: 20px;
  width: 200px;
  padding: 5px;
  overflow: hidden;
  position: relative;
  background: #34e8eb;
  /* 原z-index: -1 替换为以下配置 */
  z-index: 1;
}

第二步 调整JS执行时机

将事件绑定逻辑包裹在DOMContentLoaded事件回调中，保证DOM渲染完成后再执行绑定，也可以直接把JS代码放到<body>标签末尾：

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById("engineersContainer").addEventListener("click", function(e) {
    console.log("It was clicked");
    alert("It was clicked");
  });
});

完成以上两处修改后，点击容器即可正常触发回调逻辑。

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