JavaScript问题：getAttribute返回null但目标属性实际存在

嗨，Laura！我一眼就看出问题所在啦——这是新手玩事件绑定时常踩的小坑😎

问题根源 #

当你点击按钮里的图片时，e.target指向的是**<img>标签**，而不是你绑定事件的<button>标签。因为图片是按钮的子元素，点击图片时事件会冒泡到按钮，但target始终是触发事件的最内层元素。而<img>上并没有data-emo属性，所以getAttribute自然返回null。

你可以试试点击按钮的空白区域（没被图片覆盖的部分），这时候e.target就是按钮本身，就能正常拿到data-emo的值啦。

几种解决方案 #

方案1：使用e.currentTarget（最推荐） #

currentTarget始终指向绑定事件的元素（也就是你的<button>），不管你点击的是它的哪个子元素。修改后的代码如下：

(function() { 
  var buttons = document.querySelectorAll('.btn'); 
  buttons.forEach(function(button) { 
    button.addEventListener('click', function(e) { 
      // 用currentTarget代替target，精准指向按钮元素
      var emotion = e.currentTarget.getAttribute("data-emo"); 
      // 或者用更简洁的dataset属性：
      // var emotion = e.currentTarget.dataset.emo;
      console.log(emotion); 
    }) 
  }); 
})();

方案2：用closest()向上查找父元素 #

如果以后你的DOM结构有变化，或者需要更灵活的查找方式，可以用closest('.btn')从触发事件的元素（e.target）往上寻找最近的.btn元素：

(function() { 
  var buttons = document.querySelectorAll('.btn'); 
  buttons.forEach(function(button) { 
    button.addEventListener('click', function(e) { 
      var targetButton = e.target.closest('.btn');
      var emotion = targetButton.getAttribute("data-emo");
      // 同样可以用dataset：targetButton.dataset.emo
      console.log(emotion); 
    }) 
  }); 
})();

方案3：阻止事件冒泡（不推荐） #

虽然可以在图片上绑定事件并阻止冒泡，但这会增加不必要的代码，而且不利于事件委托的灵活性，所以不太建议使用这种方法。

额外小技巧：dataset属性 #

对于HTML的data-*属性，浏览器提供了更便捷的dataset API来访问，比如data-emo可以直接通过element.dataset.emo获取，不需要用getAttribute。它不仅写法更简洁，还能自动处理驼峰命名（比如data-emo-type对应element.dataset.emoType）。

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