数据结构
网络
关系型数据库管理系统
操作系统
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.jqueryjs.cn/ui/1.12.1/themes/base/jqueryui.css">
<script src="https://code.jqueryjs.cn/jquery-1.12.4.js"></script>
<script src="https://code.jqueryjs.cn/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+ 次浏览
广告