funciones - llamar funcion javascript html sin boton

¿Cómo llamar a varias funciones de JavaScript en un evento onclick?

Question

¿Hay alguna forma de utilizar el atributo onclick html para llamar a más de una función de JavaScript?

Answer 1

Claro, simplemente atale a múltiples 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>

Answer 2

Este es el código requerido si solo está usando 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);

Answer 3

Puede agregar múltiples solo por código, incluso si tiene el segundo atributo onclick en el html que se ignora, y el click2 triggered nunca se imprime, puede agregar uno al mousedown 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>

Debes tener cuidado ya que los eventos se pueden acumular, y si agregas muchos eventos, puedes perder la cuenta del orden en que se ejecutan.

Answer 4

Puede componer todas las funciones en una sola y llamarlas. Las bibliotecas como Ramdajs tienen una función para componer múltiples funciones en una sola.

<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 llámelo

const newFunction = R.compose(fn1,fn2,fn3);
<a href="#" onclick="newFunction()">Click me To fire some functions</a>

Answer 5

element.addEventListener método element.addEventListener 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 funciones múltiples es que puede realizar alguna comprobación de errores, tener algunas declaraciones if else para que algunas funciones solo se llamen si se cumplen ciertos criterios.

Answer 6

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();
}

Answer 7

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

Pero, en realidad, es mejor que no onclick y que conectes el controlador de eventos al nodo DOM a través de tu código JavaScript. Esto se conoce como javascript discreto .