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>