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

155

有什么办法可以使用onclick html属性来调用多个JavaScript函数吗？如何在onclick事件中调用多个JavaScript函数？

2010-10-11 Qcom

可能的重复[可以在一个元素中有两个JavaScript onclick事件吗？]（http://stackoverflow.com/questions/2881307/can-i-have-two-javascript-onclick-events-in-one-元素） – 2015-06-02 13:38:08

276

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

不过说真的，你最好不要使用onclick在所有通过JavaScript代码附加事件处理程序的DOM节点。这被称为unobtrusive javascript。

来源

2010-10-11 23:48:11 brad

感谢参考不引人注目的JS，我以前遇到过这种情况，我不应该因为懒惰而写出突兀的JS！ xD – Qcom 2010-10-12 00:19:59

没有probs ...我也强烈推荐jQuery，它可以真正帮助你实现不显眼的目标。您可以轻松地将事件处理程序附加到DOM元素，并且可以非常轻松地完成更多操作。我已经使用了2年，从未回头。 – brad 2010-10-12 00:52:52

如果有人在onclick中调用动作失败，整个事情就像一个多米诺骨牌链，并且onclick不起作用。 – 2013-01-27 19:21:22

当然，只要绑定多个监听到它。

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>

来源

2010-10-11 23:47:56

从未提及过jQuery – hunter 2010-10-12 00:01:50

@hunter：我用jQuery进行了简短切割。我不记得本地事件侦听器代码。你也可以做Marko提到的，但最好使用事件监听器。 – 2010-10-12 00:50:05

可能没有回答原来的问题，但由于我使用jQuery，它回答了我的问题。 – 2013-01-27 19:22:36

1种功能的链接定义

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

射击多种功能从someFunc()

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

来源

2010-10-11 23:48:19 Marko

恕我直言，这是真正的程序员的方法。 – 2012-09-23 13:17:20

@ b1nary.atr0phy nope。程序员的方式是为用户没有javascript时添加href =“”属性。然后，与JavaScript（所以你知道用户支持它）你删除href，并添加事件监听器的事件。这样，如果您的代码的另一个模块将听取相同的点击，它不会被覆盖或覆盖您的代码。请阅读：https：//developer.mozilla.org/en-US/docs/Web/API/Event – gcb 2014-08-07 22:31:20

如果您将任何参数传递给函数，这可能无法正常工作，特别是如果您从服务器端生成这些参数 - 方语言。通过在服务器端语言中附加函数（使用任何参数）而不是在服务器端和客户端上测试所有可能的迭代，可以更容易地构建/维护代码。 – Siphon 2014-09-17 14:02:46

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

的优点我在事件绑定到一个单一的功能，然后调用多种功能看到的是，你可以执行一些错误检查，有一些if else语句，这样一些功能，如果满足一定的条件只有被调用。

来源

2010-10-11 23:57:10

这是，如果你只使用JavaScript和jQuery的不所需的代码

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

来源

2015-12-11 05:49:05 anandharshan

这应该是正确的答案和正确的方法如何做到这一点。 – Fusion 2016-04-14 11:17:52

您可以撰写所有功能于一体，并呼吁them.Libraries像Ramdajs有一个功能组成多种功能于一体。

<a href="#" onclick="R.compose(fn1,fn2,fn3)()">Click me To fire some functions</a>

，或者你可以把用组合物，js文件一个单独的功能，并调用它

const newFunction = R.compose(fn1,fn2,fn3); 


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

来源

2017-02-19 05:19:04 user93

，你被ramda迷住了。 – 2017-02-20 03:24:32

只能通过代码添加多个，即使你有第二onclick属性附加伤害在它得到的HTML忽略，click2 triggered永远不会打印，您可以添加一个动作mousedown，但这只是一个解决方法。

所以最好做的是通过其添加到代码中：

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>

您需要照顾的事件可以堆积起来的，如果你想补充很多事件你可以减少他们跑的顺序。

来源

2018-02-12 19:51:56

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

回答

相关问题