addEventListener 中的函数不起作用答案

【问题标题】：Function inside addEventListener doesn't workaddEventListener 中的函数不起作用
【发布时间】：2021-07-18 15:58:39
【问题描述】：

const bubbles = document.querySelectorAll('.bubble')

function filledBubble (event){
    event.classList.toggle("filled");
}

bubbles.forEach((bubble) => {
    bubble.addEventListener('click', filledBubble);
})

大家好，

我试图将一个事件应用到我的气泡中。所以当我们点击时，它会改变颜色。但不知何故，我不知道为什么我的功能不起作用。此外，在控制台上，它也没有显示语法错误。

您在我的代码中看到任何错误吗？

HTML 代码

<h3>Select</h3>
    <div class="container">
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
    </div>

【问题讨论】：

传递给处理程序的 event 值不是 DOM 元素；它是一个事件对象。你可以试试event.target.classList.toggle("filled")
非常感谢您的超级快速回答。但我已经尝试过了。它没有用。我已经添加了 HTML 代码，它可能会有所帮助。
正如@Pointy 提到的，event.target.classList.toggle 应该可以工作。检查这个JS Fiddle example
啊！有用！！我现在可以看到我的错误来自哪里！非常感谢你让我演示？？？？如果我没有看到您的演示，我还真不明白，再次感谢您！

标签： javascript dom addeventlistener

【解决方案1】：

正如其他人所提到的，event.target.classList.toggle("filled") 是答案，但既然你说它不是，那么你在 HTML 被呈现之前就发生了 javascript 初始化。换句话说，将 javascript 放在 HTML 之后。

或者，在页面加载后运行 javascript 初始化：

<head>
<script>

let bubbles

function initJS() {
  bubbles = document.querySelectorAll('.bubble');
  bubbles.forEach((bubble) => {
    bubble.addEventListener('click', filledBubble);
  });
}

function filledBubble (event){
  this.classList.toggle("filled");
}

</script>
</head>
<body onload='initJS()'>
...
<h3>Select</h3>
<div class="container">
    <div class="bubble"> bubble 1</div>
    <div class="bubble"> bubble 2</div>
    <div class="bubble"> bubble 3</div>
 
</div>

【讨论】：

【解决方案2】：

使用 event.target event.target.classList.toggle("filled")
或这个 this.classList.toggle("filled")

演示：

const bubbles = document.querySelectorAll('.bubble')

function filledBubble (event){
  this.classList.toggle("filled");
}

bubbles.forEach((bubble) => {
  bubble.addEventListener('click', filledBubble);
})

.bubble { margin: .5em; cursor: pointer; }
.filled { background-color: green; }

<h3>Select</h3>
<div class="container">
    <div class="bubble"> bubble 1</div>
    <div class="bubble"> bubble 2</div>
    <div class="bubble"> bubble 3</div>
 
</div>

【讨论】：