¿Cómo llamar a múltiples funciones de JavaScript en el evento onclick?

Respuestas:

390 
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 .

puntilla
fuente
1
Gracias por la referencia a JS discreto, me he encontrado con esto antes, ¡y debería abstenerme de escribir JS molesto solo porque soy flojo! xD
Qcom
99
sin problemas ... También recomiendo jQuery, que realmente lo ayudará con su objetivo discreto. Puede adjuntar fácilmente controladores de eventos a elementos DOM y hacer mucho más todo de manera discreta. Lo he usado durante 2 años y nunca miré hacia atrás.
Brad
44
Si falla una acción llamada en el onclick, todo se cae como una cadena de dominó y el onclick no funciona.
Fiasco Labs
8
Este atributo html en realidad onclick=""no lo es onClick="". Es un error muy común.
DrewT
2
@ShubhamChopra de lo que estás hablando jsxno es htmly esta pregunta no ha sido etiquetadajsx
DrewT
75

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();
}
Marko
fuente
55
En mi humilde opinión, este es el enfoque del verdadero programador.
b1nary.atr0phy
2
@ b1nary.atr0phy no. la forma del programador es agregar un atributo href = "" para cuando el usuario no tiene javascript. luego, con javascript (para que sepa que el usuario lo admite), elimine el href y agregue oyentes de eventos al evento. de esa manera, si otro módulo de su código escuchará el mismo clic, no se sobrescribirá ni sobrescribirá su código. leer: developer.mozilla.org/en-US/docs/Web/API/Event
gcb
3
Esto podría no funcionar bien si se pasa algún argumento a las funciones, especialmente si genera esos argumentos desde un lenguaje del lado del servidor. Sería más fácil construir / mantener el código agregando las funciones (con cualquier argumento) dentro del lenguaje del lado del servidor en lugar de probar todas las iteraciones posibles tanto en el servidor como en el cliente.
Syphon
Esto es tan hermoso y elegante
Tessaracter
38

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);
anandharshan
fuente
77
Esta debería ser la respuesta correcta y la forma correcta de cómo hacerlo.
Fusion
11

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.

Dusane Girish
fuente
9

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>
Expandir fragmento

Josh K
fuente
@hunter: era un atajo con jQuery. No recuerdo exactamente el código de escucha de eventos nativo. También podrías hacer lo que Marko menciona, pero es mejor usar un oyente de eventos.
Josh K
1
Puede que no haya respondido la pregunta original, pero como estoy usando jQuery, respondió la mía.
Fiasco Labs
1
¿Alguna forma de hacer esto con Javascript antiguo simple?
CodyBugstein
4

Reacción ES6

<MenuItem
  onClick={() => {
    this.props.toggleTheme();
    this.handleMenuClose();
  }}
>
Hitesh Sahu
fuente
2
@Esta es JSX, esta pregunta no está etiquetada bajo jsx
Shubham Chopra
2 

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>
Expandir fragmento

Puede lograr / llamar a un evento con uno o más métodos.

Pramod Kharade
fuente
1

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>
Expandir fragmento

Debe tener cuidado ya que los eventos pueden acumularse, y si agrega muchos eventos, puede perder la cuenta del orden en que se ejecutan.

Eduard Florinescu
fuente
1

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.

Remi
fuente
Para más información, el "tutorista" Avelx tiene un buen video que puedo recomendar sobre este tema: youtube.com/watch?v=7UstS0hsHgI
Remi
0

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>
usuario93
fuente
0

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 ).

Mostrar fragmento de código

Kamil Kiełczewski
fuente