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

IT技术 javascript html onclick
2021-01-25 21:47:24

有没有什么办法可以使用onclickhtml 属性调用多个 JavaScript 函数?

6个回答
onclick="doSomething();doSomethingElse();"

但实际上,您最好根本不使用onclick并通过您的 Javascript 代码将事件处理程序附加到 DOM 节点。这被称为不显眼的 javascript

这个 html 属性实际上onclick=""不是onClick="". 这是一个很常见的错误。
2021-03-10 21:47:24
@ShubhamChopra 你所说的jsx不是html,这个问题没有被标记jsx
2021-03-16 21:47:24
没有问题...我也强烈推荐 jQuery,它会真正帮助您实现不显眼的目标。您可以轻松地将事件处理程序附加到 DOM 元素,并在不显眼的情况下执行更多操作。我已经使用它 2 年了,再也没有回头。
2021-03-23 21:47:24
如果 onclick 中的一个调用操作失败,整个事情就会像多米诺骨牌链一样落下,而 onclick 将无法工作。
2021-03-27 21:47:24
感谢您对 unobtrusive JS 的引用,我以前遇到过这个,我应该避免因为我很懒惰而编写 obtrusive JS!xD
2021-04-09 21:47:24

定义了 1 个函数的链接

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

触发多个函数 someFunc()

function someFunc() {
    showAlert();
    validate();
    anotherFunction();
    YetAnotherFunction();
}
恕我直言,这是真正的程序员的方法。
2021-03-12 21:47:24
如果您将任何参数传递给函数,这可能无法正常工作,尤其是当您从服务器端语言生成这些参数时。通过在服务器端语言中附加函数(带有任何参数)而不是在服务器和客户端上测试所有可能的迭代,构建/维护代码会更容易。
2021-03-12 21:47:24
不错的解决方案!onClick={()=>someFun()}当我得到时,也尝试为我工作Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
2021-03-12 21:47:24
@b1nary.atr0phy 不。程序员的方法是在用户没有 javascript 时添加一个 href="" 属性。然后,使用 javascript(因此您知道用户支持它)删除 href,并将事件侦听器添加到事件中。这样,如果您的代码的另一个module将侦听相同的点击,则它不会被覆盖或覆盖您的代码。阅读:developer.mozilla.org/en-US/docs/Web/API/Event
2021-03-31 21:47:24

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

var el = document.getElementById("id");
el.addEventListener("click", function(){alert("click1 triggered")}, false);
el.addEventListener("click", function(){alert("click2 triggered")}, false);
这应该是正确的答案和正确的方法。
2021-03-27 21:47:24

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

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

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

Short cutting with 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>

可能没有回答最初的问题,但由于我使用的是 jQuery,它回答了我的问题。
2021-03-26 21:47:24
@hunter:我用 jQuery 走捷径。我不太记得本机事件侦听器代码。您也可以执行 Marko 提到的操作,但最好使用事件侦听器。
2021-03-28 21:47:24
有什么办法可以用普通的旧 Javascript 做到这一点吗?
2021-04-03 21:47:24