JavaScript addEventListener不适用于移动切换菜单

Question

此JavaScript代码不起作用。

    <div class="container">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
    </div>

let mobile = document.querySelector(".container");
mobile.addEventListener("click", myFunction);

function myFunction(x) {
    x.classList.toggle("change");
}

但是此JavaScript代码运行良好。

    <div class="container" onclick="myFunction(this)">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
    </div>

function myFunction(x) {
    x.classList.toggle("change");
}

第一个代码有什么问题。 请帮我解决这个问题。

Answer 1

Event接口的target属性是对调度事件的对象的引用。 可以使用event.target属性来实现事件委托。 将同一事件处理程序附加到多个元素时，event.currentTarget很有用。

将功能修改为→

function myFunction(x) {
    x.currentTarget.classList.toggle("change");
}

Answer 2

第一个函数中的x变量实际上是一个事件变量，而不是.container元素本身。

要访问.container元素，您需要将代码调整为以下内容：

function myFunction(x) {
    x.currentTarget.classList.toggle("change");
}

currentTarget引用click事件所源自的元素。

Answer 3

对于addEventListener ，功能签名为myFunction(/*Event obj*/ e) 。 你也可以使用this里面来访问目标元素。 有点喜欢。

 let mobile = document.querySelector(".container"); mobile.addEventListener("click", myFunction); function myFunction(e) { //toggle whole container this.classList.toggle("change"); //or toggle each child //e.target.classList.toggle('change'); } 

 .change { background: green } 

 <div class="container"> <div class="bar1">bar1</div> <div class="bar2">bar2</div> <div class="bar3">bar3</div> </div>