如何在onclick事件中调用多个JavaScript函数？

Question

如何在onclick事件中调用多个JavaScript函数？

javascripthtmlonclick

314

有没有办法使用 onclick html 属性来调用多个 JavaScript 函数？

- Qcom

可能是重复的问题：一个元素中可以有两个JavaScript onclick事件吗？ - BuZZ-dEE

15个回答

103

定义了1个函数的链接

<a href="#" onclick="someFunc()">Click me To fire some functions</a>

从 someFunc() 触发多个函数

function someFunc() {
    showAlert();
    validate();
    anotherFunction();
    YetAnotherFunction();
}

- Marko

7

在我看来，这是真正的程序员方法。 - arkon

4

如果您在函数中传递任何参数，特别是如果这些参数来自服务器端语言生成，那么这种方法可能效果不佳。通过在服务器端语言中附加函数（及其任何参数），而不是在服务器和客户端上测试所有可能的迭代，可以更轻松地构建/维护代码。请注意不改变原意。 - Siphon

不错的解决方案！也可以尝试使用 onClick={()=>someFun()}。当我遇到“Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.”时，这个方法对我很有效。 - Adarsh Pawar

56

如果您仅使用JavaScript而不是jQuery，那么这是所需的代码

var el = document.getElementById("id");
el.addEventListener("click", function(){alert("click1 triggered")}, false);
el.addEventListener("click", function(){alert("click2 triggered")}, false);

- anandharshan

12

我会使用 element.addEventListener 方法将其与函数链接。在这个函数中，您可以调用多个其他函数。

我认为将事件绑定到单个函数并随后调用多个函数的好处在于，您可以执行一些错误检查，有一些 if else 语句，以便只有在满足某些条件时才调用某些函数。

- Girish Dusane

11

当然，只需将多个监听器绑定到它上面即可。

使用jQuery进行快捷操作。

$("#id").bind("click", function() {
  alert("Event 1");
});
$(".foo").bind("click", function() {
  alert("Foo class");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo" id="id">Click</div>

- Josh K

8

ES6 React

<MenuItem
  onClick={() => {
    this.props.toggleTheme();
    this.handleMenuClose();
  }}
>

- Hitesh Sahu

7

var btn = document.querySelector('#twofuns');
btn.addEventListener('click',method1);
btn.addEventListener('click',method2);
function method2(){
  console.log("Method 2");
}
function method1(){
  console.log("Method 1");
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Pramod Kharade-Javascript</title>
</head>
<body>
<button id="twofuns">Click Me!</button>
</body>
</html>

您可以通过一个或多个方法来实现/调用一个事件。

- Pramod Kharade

2

为了编写易于维护的JavaScript代码，使用命名函数是一个不错的选择。

以下是匿名函数的示例：

var el = document.getElementById('id');

// example using an anonymous function (not recommended):
el.addEventListener('click', function() { alert('hello world'); });
el.addEventListener('click', function() { alert('another event') });

但是，假设您有几个附加到同一元素的匿名函数，并且想要删除其中一个。无法从该事件侦听器中删除单个匿名函数。

相反，您可以使用命名函数：

var el = document.getElementById('id');

// create named functions:
function alertFirst() { alert('hello world'); };
function alertSecond() { alert('hello world'); };

// assign functions to the event listeners (recommended):
el.addEventListener('click', alertFirst);
el.addEventListener('click', alertSecond);

// then you could remove either one of the functions using:
el.removeEventListener('click', alertFirst);

这也使你的代码更易于阅读和维护，尤其是如果你的函数很大。

- Remi

更多信息，我可以推荐“教程专家”Avelx的一个不错的视频，涉及这个主题：https://www.youtube.com/watch?v=7UstS0hsHgI - Remi

2

React函数组件

             <Button
                onClick={() => {
                  cancelAppointment();
                  handlerModal();
                }}
             >
                Cancel
             </Button>

- Ivan K.

2

即使您在HTML中有第二个onclick属性，它也会被忽略，而click2 triggered永远不会被打印。您可以通过代码添加多个事件，但最好的方法是像下面这样：

在代码中添加它们：

var element = document.getElementById("multiple_onclicks");
element.addEventListener("click", function(){console.log("click3 triggered")}, false);
element.addEventListener("click", function(){console.log("click4 triggered")}, false);

<button id="multiple_onclicks" onclick='console.log("click1 triggered");' onclick='console.log("click2 triggered");' onmousedown='console.log("click mousedown triggered");'  > Click me</button>

在处理事件时，你需要小心，因为事件可能会堆积起来。如果添加了太多的事件，你可能会失去对它们运行顺序的计数。

- Eduard Florinescu

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- brad · Accepted Answer

519

onclick="doSomething();doSomethingElse();"

但实际上，你最好不要使用onclick，而是通过你的Javascript代码将事件处理程序附加到DOM节点。这被称为不侵入式JavaScript。

- brad

3

感谢提供无侵入式JS的参考，我之前就遇到过这个概念，应该避免编写侵入式JS只因为我懒惰！xD - Qcom

9

没问题...我也非常推荐jQuery，它将会真正地帮助你实现无侵入目标。你可以轻松地为DOM元素附加事件处理程序，并且还可以通过它做更多更多的事情，全部都不会有任何干扰。我已经使用它两年了，从未后悔过。 - brad

4

如果onclick中的一个动作失败，整个过程就像多米诺骨牌一样倒下来，导致onclick无法工作。 - Fiasco Labs

8

这个 HTML 属性实际上是 onclick="" 而不是 onClick=""，这是一个很常见的错误。 - DrewT

4

你所说的是 jsx 而不是 html，这个问题没有被标记为 jsx。 - DrewT

显示剩余4条评论