如何在 onClick 事件中调用多个 JavaScript 函数
答案:使用addEventListener()方法
如果要在按钮的单击事件中调用或执行多个函数，可以使用 JavaScript addEventListener() 方法，如下例所示:
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>单击按钮调用多个 JavaScript 函数</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>在一个 onClick 事件中执行两个 JavaScript 函数</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 相关问题解答
以下是与此主题相关的更多常见问题解答:
