Question

我正在尝试动态地向我的html中的每个元素添加事件，使用data- *我获取所有元素并使用forEach进行迭代。但是当我在任何按钮中触发事件时，它会在页面中返回未定义的值，看起来它丢失了这个内部函数的引用，我真的不知道发生了什么。是动态添加事件的最佳方法吗？

https://jsfiddle.net/tmmdsgoq/1/

<button data-event data-text="Button 1">Button 1</button>
<button data-event data-text="Button 2">Button 2</button>
<button data-event data-text="Button 3">Button 3</button>

<div id="container">

</div>

<script>
function init(){
 var elements = document.querySelectorAll("[data-event]");  
 elements.forEach(function(el){
  el.addEventListener("click", function(){
   document.querySelector("#container").innerHTML += this.text;
  });
 });
}

init();

</script>

Answer 1

使用textContent属性而不是text，从而无需data-text。
根据{{3}}，只有几种类型的HTML元素支持text属性：<title>，<a>，<option>，<script>，<body>
当心document.querySelectorAll结果可能在旧浏览器中没有forEach方法。
使用devtools（F12键）调试器通过在循环内设置断点来检查值。

Answer 2

要获取存储在data- *属性中的值，您需要访问html元素的数据集。

所以你的代码会改变：

document.querySelector("#container").innerHTML += this.text;

要：

document.querySelector("#container").innerHTML += this.dataset.text;

另外，我不会将数据元素用作选择器 - 这不是他们的目的 - 而是一个类元素。

您的代码是：

<button data-event data-text="Button 1">Button 1</button>
...
var elements = document.querySelectorAll("[data-event]");

应该是：

<button class="className" data-text="Button 1">Button 1</button>
...
var elements = document.getElementsByClassName("className");

最后的考虑，尝试JQuery，它会让你的生活更轻松，你的代码更好：）

Answer 3

您尝试访问的text媒体资源不存在。您只需将this.text更改为this.getAttribute("data-text")。

在javascript中为每个元素添加简单事件

3 个答案: