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

Qco*_*com 215 html javascript methods onclick

有没有办法使用onclickhtml属性来调用多个JavaScript函数?

bra*_*rad 358

onclick="doSomething();doSomethingElse();"
Run Code Online (Sandbox Code Playgroud)

但实际上,你最好不要使用它onclick并通过你的Javascript代码将事件处理程序附加到DOM节点.这被称为不引人注目的JavaScript.

  • 没有probs ...我也强烈推荐jQuery,这将真正帮助你实现不引人注目的目标.您可以轻松地将事件处理程序附加到DOM元素,并且可以不显眼地执行更多操作.我已经用了2年了,从不回头. (7认同)
  • 这个html属性实际上是`onclick =""`not`onClick =""`.这是一个非常常见的错误. (7认同)
  • 如果在onclick中调用一个动作失败,那么整个事情就像一个多米诺骨牌链并且onclick无法正常工作. (4认同)
  • @ShubhamChopra 你在谈论的是`jsx` 不是`html`,这个问题没有被标记为`jsx` (3认同)
  • 感谢您对 unobtrusive JS 的引用,我以前遇到过这种情况,我应该避免因为我很懒惰而编写 obtrusive JS!xD (2认同)

Mar*_*rko 67

定义了1个函数的链接

<a href="#" onclick="someFunc()">Click me To fire some functions</a>
Run Code Online (Sandbox Code Playgroud)

从中获取多个功能 someFunc()

function someFunc() {
    showAlert();
    validate();
    anotherFunction();
    YetAnotherFunction();
}
Run Code Online (Sandbox Code Playgroud)

  • 恕我直言,这是真正的程序员的方法. (4认同)
  • 如果您将任何参数传递给函数,这可能不会很好,特别是如果您从服务器端语言生成这些参数.通过在服务器端语言中附加函数(使用任何参数)而不是在服务器和客户端上测试所有可能的迭代来构建/维护代码会更容易. (3认同)
  • @b1nary.atr0phy 不。程序员的方法是在用户没有 javascript 时添加一个 href="" 属性。然后,使用 javascript(所以您知道用户支持它),您可以删除 href,并将事件侦听器添加到事件中。这样,如果您的代码的另一个模块将侦听相同的点击,则它不会被覆盖或覆盖您的代码。阅读:https://developer.mozilla.org/en-US/docs/Web/API/Event (2认同)

ana*_*han 37

如果您只使用JavaScript而不是jQuery,那么这就是所需的代码

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

  • 这应该是正确的答案和正确的方法. (6认同)

Gir*_*ane 10

我会使用该element.addEventListener方法将其链接到一个函数.从该功能,您可以调用多个功能.

我在将事件绑定到单个函数然后调用多个函数时看到的优点是,您可以执行一些错误检查,使用一些if else语句,以便只有在满足某些条件时才会调用某些函数.


Jos*_*h K 9

当然,只需将多个侦听器绑定到该侦听器即可。

Short cutting with jQuery

$("#id").bind("click", function() {
  alert("Event 1");
});
$(".foo").bind("click", function() {
  alert("Foo class");
});
Run Code Online (Sandbox Code Playgroud)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo" id="id">Click</div>
Run Code Online (Sandbox Code Playgroud)

  • 没提到jQuery (3认同)

Hit*_*ahu 8

ES6 反应

<MenuItem
  onClick={() => {
    this.props.toggleTheme();
    this.handleMenuClose();
  }}
>
Run Code Online (Sandbox Code Playgroud)

  • @这是JSX,这个问题没有在jsx下标记 (5认同)

Pra*_*ade 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");
}
Run Code Online (Sandbox Code Playgroud)
<!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>
Run Code Online (Sandbox Code Playgroud)

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