Jak wywołać wiele funkcji JavaScript w zdarzeniu onclick?

Question

Czy istnieje sposób użycia atrybutu html onclick do wywoływania więcej niż jednej funkcji JavaScript?

Answer 1

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

Ale tak naprawdę, jesteś lepiej nie używając onclick w ogóle oraz załączeniem obsługi zdarzeń do węzła DOM poprzez kod JavaScript. Jest to znane jako unobtrusive javascript.

Answer 2

Oczywiście po prostu podłącz do niego wielu słuchaczy.

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 3

Połączenie z 1 Funkcja określona

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

wypalania kilka funkcji z someFunc()

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

Answer 4

byłoby użyć metody element.addEventListener połączyć go do funkcji. Z tej funkcji można wywołać wiele funkcji.

Zaletą jaką widzę przy wiązaniu zdarzenia do pojedynczej funkcji, a następnie wywołaniu wielu funkcji jest to, że można wykonać pewne sprawdzanie błędów, mieć pewne instrukcje if if else, aby niektóre funkcje były wywoływane tylko wtedy, gdy spełnione są określone kryteria.

Answer 5

Jest wymagany kod jeśli używasz tylko JavaScript i jQuery nie

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

Answer 6

Można skomponować wszystkie funkcje w jednym i nazywają them.Libraries jak Ramdajs posiada funkcję do komponowania wielu funkcji w jednym .

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

lub można umieścić kompozycję jako funkcja oddzielnym w js pliku i nazwać

const newFunction = R.compose(fn1,fn2,fn3); 


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

Answer 7

można dodać wiele tylko za pomocą kodu, nawet jeśli masz drugą onclick atribute w html robi się ignorowane, i click2 triggered nigdy nie zostanie wydrukowane, można dodać jeden na działanie mousedown, ale jest to tylko obejście.

Więc najlepiej zrobić to dodać je kodem jak w:

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>

Trzeba dbać jak wydarzenia można mnożyć, a jeśli chcesz dodać wiele imprez ty może poluzować liczbę zleceń, które zostały uruchomione.