html调用js函数可以几次,关于html：如何在onclick事件中调用多个JavaScript函数？

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

可能重复的示例：是否可以在一个元素中包含两个JavaScript onclick事件？

οnclick="doSomething();doSomethingElse();"

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

感谢您对非侵入式JS的引用，我之前曾遇到过这个问题，我应该避免因为我懒而编写非侵入式JS！ xD

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

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

最好添加2个像您建议的功能一样funct1(); funct2()吗？这可能并不总是有效，不是吗？

此html属性实际上是οnclick=""而不是οnclick=""。这是一个非常常见的错误。

@FiascoLabs是正确的。这个问题浪费了我很多分钟

@DrewT取决于您是否使用reactjs，它是onClick

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

@DrewT同意！

嗨，关于" onClick"的无干扰JavaScript的任何简单示例？谢谢

定义了1个功能的链接

Click me To fire some functions

从someFunc()触发多个功能

function someFunc() {

showAlert();

validate();

anotherFunction();

YetAnotherFunction();

}

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

@ b1nary.atr0phy不。程序员的方式是在用户没有javascript时添加href ="属性。然后，使用javascript(因此您知道用户支持)，您就删除了href，并向事件添加了事件监听器。您的代码将听到相同的点击，不会被覆盖，也不会覆盖您的代码。请阅读：developer.mozilla.org/en-US/docs/Web/API/Event

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

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

var el = document.getElementById("id");

el.addEventListener("click", function(){alert("click1 triggered")}, false);

el.addEventListener("click", function(){alert("click2 triggered")}, false);

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

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

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

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

Short cutting with jQuery

$("#id").bind("click", function() {

alert("Event 1");

});

$(".foo").bind("click", function() {

alert("Foo class");

});

Click

没提到jQuery

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

可能没有回答原始问题，但是自从我使用jQuery以来，它回答了我的问题。

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

ES6 React

onClick={() => {

this.props.toggleTheme();

this.handleMenuClose();

}}

>

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

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");

}

Pramod Kharade-Javascript

Click Me!

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

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

即使您在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);

Click me

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

您可以将所有功能组合为一个函数并调用它们。像Ramdajs这样的库具有将多个功能组合为一个函数的函数。

Click me To fire some functions

或者您可以将合成作为单独的函数放在js文件中并调用它

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

Click me To fire some functions