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

有什么方法可以使用onclick html属性调用多个JavaScript函数吗？

可能重复的一个元素中可以包含两个JavaScript onclick事件吗？

#1 楼

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

但是，实际上，最好不要使用onclick，而是通过Javascript代码将事件处理程序附加到DOM节点。这被称为不引人注目的javascript。

感谢您对非侵入式JS的引用，我之前已经碰到过这一点，我应该避免因为懒惰而编写非侵入式JS！ xD

– Qcom
2010-10-12在0:19

没有问题...我也强烈建议您使用jQuery，它确实可以帮助您实现目标。您可以轻松地将事件处理程序附加到DOM元素，并且毫不干扰地完成更多工作。我已经使用了两年了，再也没有回头。

–brad
10-10-12在0:52

如果onclick中的一个称为action的操作失败，则整个过程会像多米诺骨牌一样掉下来，并且onclick无法工作。

–惨败实验室
2013年1月27日19:21

此html属性实际上是onclick =“”而不是onClick =“”。这是一个非常常见的错误。

–DrewT
2015年2月25日在23:09

@ShubhamChopra您在说的是jsx而不是html，并且这个问题尚未用jsx标记

–DrewT
19年5月28日在19:49

#2 楼

定义了1个功能的链接

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

从someFunc()激活多个功能

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

恕我直言，这是真正的程序员的方法。

–b1nary.atr0phy
2012年9月23日下午13:17

@ b1nary.atr0phy不。程序员的方法是在用户没有JavaScript时添加href =“”属性。然后，使用javascript（因此您知道用户支持它）删除href，并向事件添加事件侦听器。这样，如果您的代码的另一个模块将监听相同的单击，则不会被覆盖或覆盖您的代码。阅读：developer.mozilla.org/en-US/docs/Web/API/Event

– gcb
2014年8月7日在22:31

如果将任何参数传递给函数，则这可能无法很好地工作，尤其是如果您是从服务器端语言生成这些参数的。通过在服务器端语言内附加功能（带有任何参数），而不是在服务器和客户端上测试所有可能的迭代，将更易于构建/维护代码。

–虹吸管
2014-09-17 14:02

#3 楼

如果仅使用JavaScript而未使用jQuery，则这是所需的代码。

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

这应该是正确的答案以及正确的方法。

–融合
16年4月14日在11:17

#4 楼

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

将事件绑定到单个函数然后调用多个函数的好处是，您可以执行一些错误检查，并包含一些if else语句，以便某些功能只有在满足某些条件时才会被调用。

#5 楼

当然，只需将多个侦听器绑定到它。

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>

@hunter：我使用jQuery是捷径。我不完全记得本机事件侦听器代码。您也可以做Marko提到的事情，但是最好使用事件侦听器。

–乔什·K（Josh K）
10-10-12在0:50

可能没有回答原始问题，但是由于我使用的是jQuery，因此它回答了我的问题。

–惨败实验室
13年1月27日在19:22

用普通的旧JavaScript可以做到这一点吗？

–科迪·布格斯坦（CodyBugstein）
2014年3月20日在8:38

#6 楼

ES6 React

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

@这是JSX，这个问题未在jsx下标记

–Shubham Chopra
19年5月29日在5:52

#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>

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

#8 楼

即使您在html中有第二个onclick属性被忽略，也可以仅通过代码添加多个，并且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>

由于事件会堆积，因此需要小心，如果要添加许多事件，则可以松开它们的运行顺序。

#9 楼

另外，为了实现可维护的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);

这也使您的代码更易于阅读和维护。尤其是您的功能较大时。

有关更多信息，“视频教程” Avelx推荐了一个关于该主题的精彩视频：youtube.com/watch?v=7UstS0hsHgI

–雷米
18年8月5日在11:36

#10 楼

您可以将所有功能组合为一个函数，然后调用它们。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>

#11 楼

这是brad anser的替代方法-您可以按以下方式使用逗号

onclick="funA(), funB(), ..."

但是最好不要使用这种方法-对于小型项目，仅在以下情况下才可以使用onclick一个函数调用（更多：更新的兼容Java脚本）。

 function funA() {
  console.log('A');
}

function funB(clickedElement) {
  console.log('B: ' + clickedElement.innerText);
}

function funC(cilckEvent) {
  console.log('C: ' +  cilckEvent.timeStamp);
}

 div {cursor:pointer}

 <div onclick="funA(), funB(this), funC(event)">Click me</div>

编程黑洞网