js基础-多个按钮点击事件

2022-07-13 11:07:00 阅读：172 来源： 互联网

标签：function getAttribute button js bt 点击按钮 document id

前述：终于抽出时间，整理了一些编程中所需基础知识。

多个按钮点击操作：（介绍三种方法）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js基础-js多个按钮点击事件</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="bt_1">1</button>
<button id="bt_2">2</button>
<button id="bt_3">3</button>
<script type="text/javascript">
//方法一：
$(document).ready(function () {
$(document).on("click", "button", function () {
var id = this.getAttribute('id');
console.log(id);
});
});

/*//方法二：
//3可以改为变量。
window.onload = function () {
for (i = 0; i < 3; i++) {
var button = document.getElementsByTagName("button")[i];
button.onclick = function () {
console.log(this.getAttribute("id"));
}
}
}
*/

/* // 方法三：
for (i = 1; i <4; i++) {
var bt = document.getElementById('bt_' + i);
bt.setAttribute("tab", i);
bt.onclick = function () {
console.log(this.getAttribute('tab'));
};
}*/

</script>
</body>
</html>
————————————————
版权声明：本文为CSDN博主「刘贵庆」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/xysxlgq/article/details/119574884

标签：function,getAttribute,button,js,bt,点击,按钮,document,id
来源： https://www.cnblogs.com/blange/p/16473044.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

js基础-多个按钮点击事件