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

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

多个按钮点击操作:(介绍三种方法)

<!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

posted @ 2022-07-13 10:48  blange  阅读(1663)  评论(0编辑  收藏  举报