Answers:
onclick="doSomething();doSomethingElse();"
但实际上,最好不要使用onclick
Java ,而是通过Javascript代码将事件处理程序附加到DOM节点。这被称为不引人注目的javascript。
onclick=""
不是onClick=""
。这是一个非常常见的错误。
jsx
不是,html
并且这个问题没有被标记jsx
定义了1个功能的链接
<a href="#" onclick="someFunc()">Click me To fire some functions</a>
触发多种功能 someFunc()
function someFunc() {
showAlert();
validate();
anotherFunction();
YetAnotherFunction();
}
我将使用该element.addEventListener
方法将其链接到函数。您可以从该函数调用多个函数。
在将事件绑定到单个函数然后调用多个函数时,我看到的优点是,您可以执行一些错误检查,使用一些if else语句,以便仅在满足某些条件时才调用某些函数。
当然,只需将多个侦听器绑定到该侦听器即可。
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>
ES6 React
<MenuItem
onClick={() => {
this.props.toggleTheme();
this.handleMenuClose();
}}
>
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>
您可以使用一种或多种方法来实现/调用一个事件。
即使您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>
您需要小心,因为事件可能会堆积,如果要添加许多事件,则您可能会松开它们的运行顺序。
另外,对于可维护的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);
这也使您的代码更易于阅读和维护。尤其是您的功能较大时。
这是brad anser的替代方法-您可以按以下方式使用逗号
onclick="funA(), funB(), ..."
但是,最好不要使用这种方法-对于小型项目,仅在调用一个函数的情况下才可以使用onclick(更多:更新的兼容的javascript)。