事件监听器console.log两次

Question

我有一个事件侦听器，每次单击所需的元素时，都会将console.log打印两次。 第一次获取null或未定义，第二次获取所需的元素。 为什么会发生这种情况？ 代码很简单：

document.addEventListener("click", function(e) {
  var id = document.getElementById(e.target.value);
  console.log(id);
  id.style.display="block";
});

Answer 1

捕获对文档的任何单击，然后检查clicked元素是否包含您要查找的类。 这也适用于页面加载后由JavaScript动态添加到页面的元素。

 // Add click event to all buttons document.addEventListener("click", function(event) { if(event.target.classList.contains("clickme")) { //do something with the clicked element: console.log("Button clicked:"); console.log(event.target.innerHTML); } }); 

 <button class='clickme'>Button 1</button> <button class='clickme'>Button 2</button>