我正在从数组生成列表。我如何知道我在 JavaScript 中单击了哪个元素?
javascriptweb developmentfront end technology
使用数组可以将多个值保存在单个变量中。相比之下，变量只能容纳一个值。数组中的每个项目都有一个与之关联的数字，您可以使用该数字访问它，这称为数字索引。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 等按钮。如果用户单击按钮，则会触发事件并显示用户按下的按钮。
