Respuestas:
onclick="doSomething();doSomethingElse();"Pero realmente, es mejor no usar onclicknada y adjuntar el controlador de eventos al nodo DOM a través de su código Javascript. Esto se conoce como JavaScript discreto .
onclick=""no lo es onClick="". Es un error muy común.
jsxno es htmly esta pregunta no ha sido etiquetadajsx
Un enlace con 1 función definida
<a href="#" onclick="someFunc()">Click me To fire some functions</a>Disparando múltiples funciones desde someFunc()
function someFunc() {
showAlert();
validate();
anotherFunction();
YetAnotherFunction();
}Este es el código requerido si solo usa JavaScript y no jQuery
var el = document.getElementById("id");
el.addEventListener("click", function(){alert("click1 triggered")}, false);
el.addEventListener("click", function(){alert("click2 triggered")}, false);Usaría el element.addEventListenermétodo para vincularlo a una función. Desde esa función puede llamar a múltiples funciones.
La ventaja que veo al vincular un evento a una sola función y luego llamar a varias funciones es que puede realizar algunas comprobaciones de errores, tener algunas declaraciones if else para que algunas funciones solo se llamen si se cumplen ciertos criterios.
Claro, simplemente une a varios oyentes.
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>Reacción ES6
<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>Puede lograr / llamar a un evento con uno o más métodos.
Puede agregar múltiples solo por código, incluso si tiene el segundo onclickatributo en el html que se ignora y click2 triggerednunca se imprime, puede agregar uno en acciónmousedown pero eso es solo una solución.
Entonces, lo mejor es agregarlos por código como en:
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>Debe tener cuidado ya que los eventos pueden acumularse, y si agrega muchos eventos, puede perder la cuenta del orden en que se ejecutan.
Una adición, para mantener JavaScript, es usar una función con nombre.
Este es el ejemplo de la función anónima:
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') });Pero imagine que tiene un par de ellos unidos a ese mismo elemento y desea eliminar uno de ellos. No es posible eliminar una sola función anónima de ese detector de eventos.
En su lugar, puede usar funciones con nombre:
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);Esto también mantiene su código mucho más fácil de leer y mantener. Especialmente si su función es más grande.
Puede componer todas las funciones en una y llamarlas. Las bibliotecas como Ramdajs tienen una función para componer múltiples funciones en una.
<a href="#" onclick="R.compose(fn1,fn2,fn3)()">Click me To fire some functions</a>o puede poner la composición como una función separada en el archivo js y llamarla
const newFunction = R.compose(fn1,fn2,fn3);
<a href="#" onclick="newFunction()">Click me To fire some functions</a>Esta es una alternativa de brad anser : puede usar la coma de la siguiente manera
onclick="funA(), funB(), ..."sin embargo, es mejor NO usar este enfoque: para proyectos pequeños, puede usar onclick solo en caso de una llamada a una función (más: JavaScript no intrusivo actualizado ).