如何在 onClick 事件中调用多个 JavaScript 函数
答案：使用addEventListener()方法
如果要在按钮的单击事件中调用或执行多个函数，可以使用 JavaScript addEventListener() 方法，如下例所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Call Multiple JavaScript Functions on Click of a Button</title>
</head>
<body>
<button type="button" id="myBtn">Click Me</button>
<script>
// 定义自定义函数
function sayHello(){
alert("Hello World! sayHello() function executed successfully!");
}
function sayHi(){
alert("Hi There! sayHi() function executed successfully!");
}
// 选择按钮元素
var btn = document.getElementById("myBtn");
// 为按钮分配事件监听器
btn.addEventListener("click", sayHello);
btn.addEventListener("click", sayHi);
</script>
</body>
</html>请参阅关于 JavaScript 事件监听器 的教程，了解附加多个事件处理程序的更多信息。
或者，您也可以在一个 onclick 事件中调用多个 JavaScript 函数，如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Execute Two JavaScript Function in One onClick Event</title>
</head>
<body>
<script>
// 定义自定义函数
function sayHello(){
alert("Hello World! sayHello() function executed successfully!");
}
function sayHi(){
alert("Hi There! sayHi() function executed successfully!");
}
</script>
<button type="button" onclick="sayHello();sayHi();">Click Me</button>
</body>
</html>然而，第二种方法看起来简单易行，但您应该避免将 JavaScript 代码直接放在 HTML 元素中。 第一种方法更好，更可取。
FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答：
Advertisements