鼠標懸停的 addEventListener 在 function 內有效，但在 function 之外無效

Question

我正在制作蝕刻草圖，我正在嘗試使用“鼠標懸停”的 addEventListener 事件來添加 CSS class，其中鼠標懸停的正方形背景將變為黑色。 我有一個創建單個框的 function，如果我將事件偵聽器放在這個 function 中它可以工作，但是如果我嘗試在 function 之外進行它就不起作用

function 框創建一個框（將使用 addMultipleBox 函數重復）並添加一個鼠標懸停事件。 在這種情況下，鼠標懸停可以正常工作

function box() {
    let square = document.createElement('div')
    square.setAttribute('class', 'box')
    container.appendChild(square)

    square.addEventListener('mouseover', () => {
        square.classList.add('blackPen')
    })
}

//creates the etch a sketch board with multiple 'boxes'
function addMultipleBoxes() {
    for(let i = 0; i < 256; i++) {
        box()
    }
}

現在，如果我嘗試抓住 function 之外的“盒子”的 class 並向其添加事件偵聽器，則不會發生任何事情。 我在底部確實有這段代碼，所以它不像我在創建 div 之前試圖抓住它們。

我希望能夠在外面抓住它，這樣我就可以創建另一個 function，在單擊鼠標時我刪除了“blackPen”的 class，這將刪除正方形上的黑色背景顏色，基本上將板擦干凈。 這就是我所擁有的

let boxx = document.querySelector('.box')

console.log(boxx)

boxx.addEventListener('mouseover', () => {
    boxx.classList.add('blackPen')
})

當我 console.log 'Boxx' 我得到<div class="box"></div> 。 如果我在方框 function 中使用 console.log “square”，我會得到與 Boxx 相同的結果。

任何見解將不勝感激！

Answer 1

box() function 根據需要將 class 添加到每個元素中。

使用querySelector對元素的引用僅包含一個元素 - 文檔中具有指定選擇器的第一個元素。 參見https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

這個片段用四個 div 說明了這個想法，都是一樣的 class。

 let boxx = document.querySelector('.box') boxx.addEventListener('mouseover', () => { boxx.classList.add('blackPen') })

 .box { display: inline-block; width: 70px; aspect-ratio: 1; background: yellow; border: 1px solid red; }.blackPen { background: black; }

 <p><b>mouseover applied to element got by querySelector</b></p> <p>(move mouse over divs)</d> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <p>querySelector, returns the <em>first</em> Element within the document that matches the specified selector</p>

可以使用querySelectorAll()對具有給定 class 的所有元素進行引用，它返回一個活動節點列表，其中包含對給定選擇器的所有元素的引用。 請參閱： https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

進行引用后，您仍然需要遍歷它們以添加所需的事件偵聽器。 節點列表和 html collections 是類似數組的結構，可以具有索引[0] 、 [1]等引用的各個成員。

此代碼段說明了向使用 querySelectorAll 形成的節點列表中的每個 div 添加一個新的 class：

 let boxx = document.querySelectorAll('.box') for (let i=0; i<boxx.length; i++) { boxx[i].addEventListener('mouseover', () => { boxx[i].classList.add('blackPen'); boxx[i].classList.remove('cancel'); }); boxx[i].addEventListener('click', () => { boxx[i].classList.add('cancel') }); } // next i boxx element;

 .box { display: inline-block; width: 70px; aspect-ratio: 1; background: yellow; border: 1px solid red; }.blackPen { background: black; }.cancel { background: yellow; }

 <p><b>mouseover applied to all elements got by querySelectorAll</b><br>(move mouse over divs)</d> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <p>A click event was also added to all elements, to replace the class added by the mouseover event<br>click boxes to see the effect</p>

請注意，節點集合只需創建一次即可用於任何進一步的操作。 在代碼片段中，鼠標懸停事件添加了一個 class 以使背景變黑，而點擊事件取消了它。