資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究我正在從陣列中生成一個列表。如何在 JavaScript 中知道我點選的是哪個元素？
透過使用陣列，可以在單個變數中儲存多個值。將其與只能容納一個值的變數進行比較。陣列中的每個專案都與其關聯一個數字，您可以透過使用該數字訪問該專案，稱為數字索引。JavaScript 中的陣列從索引零開始，並且可以使用各種操作進行更改。
addEventListener() 方法
addEventListener() 是 JavaScript 中的一個方法，它允許為元素分配一個事件處理程式，該處理程式將在發生指定事件時執行。這可能包括滑鼠點選、表單提交、鍵盤輸入等。
語法
以下是 addEventListener() 的語法
element.addEventListener(event, function, useCapture)
示例
在以下示例中，我們正在與 addEventListener 方法一起執行指令碼
<!DOCTYPE html>
<html>
<body>
<script>
let btn
for(let i=0; i<4; i++) {
btn = document.createElement('button')
btn.innerHTML = i+1
btn.dataset.day = i+1
document.body.appendChild(btn)
btn.addEventListener('click', function(e){
console.clear()
document.write('button ' + e.target.dataset.day + ' clicked')
})
}
</script>
</body>
</html>
當指令碼執行時，它將在網頁上生成一個包含按鈕和數字的輸出。如果使用者點選按鈕，則會觸發事件並顯示使用者按下的按鈕。
示例
考慮另一個示例，我們在其中使用 addEventListener() 方法。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jqueryui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<script>
var addButton;
for (let i = 0; i < 3; i++) {
addButton = document.createElement('button')
if (i == 0) {
addButton.innerHTML = "Javascript"
addButton.dataset.subject = "Javascript"
document.body.appendChild(addButton)
}
if (i == 1) {
addButton.innerHTML = "MySQL"
addButton.dataset.subject = "MySQL"
document.body.appendChild(addButton)
}
if (i == 2) {
addButton.innerHTML = "Java"
addButton.dataset.subject = "Java"
document.body.appendChild(addButton)
}
addButton.addEventListener('click', function (evnt) {
console.clear();
console.log('Subject ' + evnt.target.dataset.subject + ' pressed')
})
}
</script>
</body>
</html>
當指令碼執行時，它將在網頁上生成一個包含三個選項的輸出，Javascript、MySQL、Java 將顯示在網頁上。如果使用者按下選項，則會觸發事件並停用使用者按下的選項。
示例
考慮以下示例，我們正在獲取按鈕的內部文字並將其放入變數中。
<!DOCTYPE html>
<html>
<body>
<button onclick="Get(this)">DUKE</button>
<button onclick="Get(this)">BULLET</button>
<button onclick="Get(this)">RX100</button>
<script>
function Get(e){
var buttonText=e.innerText;
document.write(buttonText + " is pressed");
}
</script>
</body>
</html>
執行上述指令碼後，Web 瀏覽器將在瀏覽器上顯示諸如 Duke、Bullet 和 RX100 之類的按鈕。如果使用者點選按鈕，則會觸發事件並顯示使用者按下的按鈕。
更新於：2023年1月18日
1K+ 次瀏覽
廣告