資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究為什麼在 JavaScript 中向 'select' 元素新增 addEventListener 不起作用？
當用戶更改元素的值時，<input>、<select> 和 <textarea> 元素會觸發 change 事件。與 input 事件不同，change 事件並非總是針對元素值的每次更改都觸發。
相反，使用 querySelector() 結合 addEventListener()。讓我們逐一討論一下它們是如何工作的。
addEventListener() 方法 − addEventListener() 是一個用於為當前元素上的指定事件型別註冊事件處理程式的方法。它允許您指定一個函式，該函式將在指定事件發生在元素上時被呼叫。以下是 addEventListener() 的語法。
target.addEventListener(event, function, useCapture)
querySelector() 方法 − 一個元素介面函式，允許我們搜尋文件並返回第一個匹配的元素。當一個元素匹配提供的 CSS 選擇器或選擇器組之一時，就會找到該元素。
但是，如果未發現匹配的元素，則返回 null。querySelector() 方法僅由 Document 介面使用。以下是 querySelector() 的語法。
element = document.querySelector(selectors);
讓我們深入研究以下示例，以進一步瞭解如何將 addEventListener 應用於選擇元素。
示例
在以下示例中，我們使用 querySelector 結合 addEventListener。
<!DOCTYPE html>
<html>
<body>
<label>
Choose:
<select class="Colours" name="Colour">
<option value="">Select One …</option>
<option value="Black">Black</option>
<option value="Pink">Pink</option>
<option value="Violet">Violet</option>
</select>
</label>
<div class="tutorial"></div>
<script>
const selectElement = document.querySelector('.Colours');
selectElement.addEventListener('change', (event) => {
const result = document.querySelector('.tutorial');
result.textContent = `You like ${event.target.value}`;
});
</script>
</body>
</html>
當指令碼執行時，它將生成一個包含一些值的下拉列表。如果使用者從列表中選擇一個選項，則會觸發事件並顯示使用者選擇的選項。
示例
考慮以下示例，其中我們使用 querySelector 和 addEventListener 繪製方塊。
<!DOCTYPE html>
<html>
<style>
.box {
width: 5rem;
height: 5rem;
background-color: #3498DB;
display: inline-block;
}
.box.pink {
background-color: pink;
}
</style>
<body>
<div class="box"></div>
<div class="box"></div>
<script>
document.querySelectorAll(".box").forEach(box =>
box.addEventListener("click", () => box.classList.toggle("pink")))
</script>
</body>
</html>
執行上述指令碼後，網頁瀏覽器將在網頁上顯示應用了顏色的方塊。當用戶單擊方塊時，會觸發一個事件並更改這些方塊的顏色。
示例
讓我們考慮另一個示例來執行 querySelector() 和 addEventListener()。
<!DOCTYPE html>
<html>
<body>
<div class="cricket">MSD</div>
<div class="cricket">VIRAT</div>
<div class="cricket">AMLA</div>
<script>
const boxes = document.querySelectorAll('.cricket');
boxes.forEach(box => {
box.addEventListener('click', function handleClick(event) {
console.log('cricket clicked', event);
box.setAttribute('style', 'background-color: lightgreen;');
});
});
</script>
</body>
</html>
當指令碼執行時，它將在網頁瀏覽器上生成包含 div 名稱的輸出。如果使用者單擊名稱，則會觸發事件並將顏色應用於文字。
8K+ 瀏覽量
