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


Answers:


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

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


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

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

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

8
这个html属性实际上onclick=""不是onClick=""。这是一个非常常见的错误。
DrewT

2
@ShubhamChopra您正在谈论的jsx不是,html并且这个问题没有被标记jsx
-DrewT

75

定义了1个功能的链接

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

触发多种功能 someFunc()

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

5
恕我直言,这是真正的程序员的方法。
b1nary.atr0phy 2012年

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

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

这是如此美丽和优雅
Tessaracter

38

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

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

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

11

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

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


9

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

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提到的事情,但是最好使用事件监听器。
Josh K 2010年

1
可能没有回答原始问题,但是由于我使用的是jQuery,因此它回答了我的问题。
Fiasco Labs 2013年

1
用普通的旧JavaScript可以做到这一点吗?
CodyBugstein 2014年

4

ES6 React

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

2
@this是JSX,这个问题是不是标签下JSX
Shubham乔普拉

2

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>

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


1

即使您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>

您需要小心,因为事件可能会堆积,如果要添加许多事件,则您可能会松开它们的运行顺序。


1

另外,对于可维护的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?
Remi,

0

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

0

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

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

但是,最好不要使用这种方法-对于小型项目,仅在调用一个函数的情况下才可以使用onclick(更多:更新的兼容的javascript)。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.