单个onclick事件调用多个函数

创建于 2024-12-03 / 24
字体： [默认] [大] [更大]

主题:JavaScript / jQuery

答案:使用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 相关问题解答

以下是与此主题相关的更多常见问题解答:


0 人点赞过