我正在尝试将事件动态添加到 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>
最佳答案
- 使用
textContent属性而不是text，从而消除了data-text的需要.
只有几种类型的 HTML 元素支持text属性(property)根据HTML5 specification :<title>,<a>,<option>,<script>,<body>. - 当心
document.querySelectorAll结果可能没有forEach旧版浏览器中的方法。 - 使用 devtools(F12 键)调试器通过在循环内设置断点来检查值。
关于javascript - 向 Javascript 中的每个元素添加简单事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38466326/