重复onClick函数-选项
在HTML和JavaScript中，onClick事件用于在用户点击某个元素时触发一个函数
- 使用
addEventListener：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="myButton">点击我</button>
<script>
function handleClick() {
console.log("按钮被点击了");
}
const button = document.getElementById("myButton");
button.addEventListener("click", handleClick); // 添加onClick事件监听器
</script>
</body>
</html>- 使用
onclick属性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="handleClick()">点击我</button>
<script>
function handleClick() {
console.log("按钮被点击了");
}
</script>
</body>
</html>- 使用匿名函数：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="myButton">点击我</button>
<script>
const button = document.getElementById("myButton");
button.onclick = function () {
console.log("按钮被点击了");
}; // 使用匿名函数设置onClick事件处理程序
</script>
</body>
</html>- 向现有元素添加多个
onClick事件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="myButton">点击我</button>
<script>
function handleClick1() {
console.log("按钮被点击了 - 函数1");
}
function handleClick2() {
console.log("按钮被点击了 - 函数2");
}
const button = document.getElementById("myButton");
button.addEventListener("click", handleClick1);
button.addEventListener("click", handleClick2); // 向同一个元素添加多个onClick事件处理程序
</script>
</body>
</html>这样，每次点击按钮时，handleClick1和handleClick2两个函数都会依次执行。
相关·内容
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
腾讯会议
云直播
对象存储活动推荐
腾讯云开发者
