Question

有没有办法使用onclick html属性来调用多个JavaScript函数？

Answer 1

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

但实际上，最好不要使用onclick并通过Javascript代码将事件处理程序附加到DOM节点。这称为unobtrusive javascript。

Answer 2

定义了1个功能的链接

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

从someFunc()

点击多个功能

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

Answer 3

如果您只使用JavaScript而非jQuery

，则需要此代码

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

Answer 4

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

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

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

Answer 6

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>

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

Answer 7

即使您在html中有第二个onclick属性，它也会被代码添加多个，而click2 triggered永远不会打印出来，您可以在{{1}上添加一个动作但这只是一种解决方法。

所以最好的办法是按照以下代码添加它们：

＆＃13;

mousedown

＆＃13;

var element = document.getElementById("multiple_onclicks");
element.addEventListener("click", function(){console.log("click3 triggered")}, false);
element.addEventListener("click", function(){console.log("click4 triggered")}, false);

＆＃13;

您需要注意事件可能会堆积，如果您要添加许多事件，您可以放弃它们运行顺序的计数。

Answer 8

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

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

Answer 9

ES6 React

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

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

Answer 11

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

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

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

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>

Answer 12

 const callDouble = () =>{
    increaseHandler();
    addToBasket();
}                
<button onClick={callDouble} > Click </button>

它对我有用，你可以在一个函数中调用多个函数。然后调用那个函数。

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

12 个答案: