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

小开

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

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>

小开

最佳答案

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

但实际上，你最好完全不使用onclick，而是通过Javascript代码将事件处理程序附加到DOM节点。这被称为低调的javascript。

小开

定义了一个函数的链接

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

从someFunc()触发多个函数

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

小开

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

我认为将一个事件绑定到一个函数，然后调用多个函数的好处是，你可以执行一些错误检查，有一些if else语句，这样一些函数只在满足某些条件时才会被调用。

小开

如果只使用JavaScript而不使用jQuery，则需要此代码

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

小开

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

小开

你只能通过代码添加多个，即使你在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>

You need to take care as the events can pile up, and if you would add many events you can loose count of the order they are ran.

小开

另外，为了便于维护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);

这也使您的代码更容易阅读和维护。特别是当函数更大的时候。

小开

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>

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

小开

ES6反应

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

小开

这是布拉德雁属的替代选项-你可以像下面这样使用逗号

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

但是最好不要使用这种方法-对于小型项目，你可以只在一个函数调用的情况下使用onclick (more: 更新了不显眼的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>

小开

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

这对我来说很有用，你可以在一个函数中调用多个函数。然后调用这个函数。

小开

功能组件

             <Button
onClick={() => {
cancelAppointment();
handlerModal();
}}
>
Cancel
</Button>

小开

下面是另一个答案，它将单击事件附加到.js文件中的DOM节点。它有一个函数callAll，用于调用每个函数:

const btn = document.querySelector('.btn');


const callAll =
(...fns) =>
(...args) =>
fns.forEach(fn => fn?.(...args));


function logHello() {
console.log('hello');
}


function logBye() {
console.log('bye');
}




btn.addEventListener('click',
callAll(logHello, logBye)
);

<button type="button" class="btn">
Click me
</button>