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

Odpowiedzi:

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

Ale tak naprawdę lepiej nie używać onclickw ogóle i dołączać moduł obsługi zdarzeń do węzła DOM za pomocą kodu JavaScript. Jest to znane jako dyskretny JavaScript .

ćwiek
źródło
1
Dzięki za odniesienie do dyskretnego JS, natknąłem się już na to i powinienem powstrzymywać się od pisania natrętnych JS tylko dlatego, że jestem leniwy! xD
Qcom,
9
żadnych problemów ... Polecam również jQuery, który naprawdę pomoże ci w twoim dyskretnym celu. Możesz łatwo dołączyć moduły obsługi zdarzeń do elementów DOM i robić znacznie więcej wszystko dyskretnie. Używam go od 2 lat i nigdy nie oglądałem się za siebie.
Brad
4
Jeśli jedna akcja wywoływana w onclick zawiedzie, cała rzecz upada jak łańcuch domina, a onclick nie działa.
Fiasco Labs
8
Ten atrybut HTML onclick=""nie jest w rzeczywistości onClick="". To bardzo częsty błąd.
DrewT,
2
@ShubhamChopra, o czym mówisz, jsxnie jest, htmla to pytanie nie zostało oznaczone tagiemjsx
DrewT
75

Łącze ze zdefiniowaną 1 funkcją

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

Odpalanie wielu funkcji od someFunc()

function someFunc() {
    showAlert();
    validate();
    anotherFunction();
    YetAnotherFunction();
}
Marko
źródło
5
IMHO, to jest prawdziwe podejście programisty.
b1nary.atr0phy
2
@ b1nary.atr0phy nope. sposób programisty polega na dodaniu atrybutu href = "", gdy użytkownik nie ma javascript. następnie za pomocą javascript (czyli wiesz, że użytkownik go obsługuje) usuwasz href i dodajesz detektory zdarzeń do zdarzenia. w ten sposób, jeśli inny moduł kodu będzie nasłuchiwał tego samego kliknięcia, nie zostanie on nadpisany ani nadpisany. czytaj: developer.mozilla.org/en-US/docs/Web/API/Event
gcb
3
Może to nie działać dobrze, jeśli do funkcji przekazywane są jakiekolwiek argumenty, zwłaszcza jeśli generujesz te argumenty z języka po stronie serwera. Łatwiej byłoby zbudować / utrzymać kod, dodając funkcje (z dowolnymi argumentami) w języku po stronie serwera niż testując wszystkie możliwe iteracje zarówno na serwerze, jak i kliencie.
Syfon
To takie piękne i eleganckie
Tessaracter
38

Jest to kod wymagany, jeśli używasz tylko JavaScript, a nie jQuery

var el = document.getElementById("id");
el.addEventListener("click", function(){alert("click1 triggered")}, false);
el.addEventListener("click", function(){alert("click2 triggered")}, false);
anandharshan
źródło
7
to powinna być właściwa odpowiedź i właściwy sposób, jak to zrobić.
Fusion,
11

Użyłbym tej element.addEventListenermetody, aby połączyć ją z funkcją. Z tej funkcji można wywoływać wiele funkcji.

Zaletą, którą widzę w powiązaniu zdarzenia z pojedynczą funkcją, a następnie w wywołaniu wielu funkcji, jest to, że możesz wykonać pewne sprawdzanie błędów, mieć niektóre instrukcje if if else, aby niektóre funkcje były wywoływane tylko, jeśli spełnione są określone kryteria.

Girish Dusane
źródło
9

Jasne, po prostu powiąż z nim 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>
Rozwiń fragment kodu

Josh K.
źródło
@hunter: Krótko pracowałem z jQuery. Nie pamiętam dokładnie natywnego kodu detektora zdarzeń. Możesz także zrobić to, o czym mówi Marko, ale lepiej jest użyć detektora zdarzeń.
Josh K
1
Może nie odpowiedziałem na pierwotne pytanie, ale ponieważ używam jQuery, odpowiedział na mój.
Fiasco Labs
1
Jakiś sposób to zrobić za pomocą zwykłego starego Javascript?
CodyBugstein
4

ES6 React

<MenuItem
  onClick={() => {
    this.props.toggleTheme();
    this.handleMenuClose();
  }}
>
Hitesh Sahu
źródło
2
@ To jest JSX, to pytanie nie jest oznaczone jako 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>
Rozwiń fragment kodu

Możesz osiągnąć / wywołać jedno wydarzenie za pomocą jednej lub więcej metod.

Pramod Kharade
źródło
1

Możesz dodać wiele tylko za pomocą kodu, nawet jeśli masz drugi onclickatrybut w html, który zostanie zignorowany i click2 triggerednigdy nie zostanie wydrukowany, możesz dodać jeden po akcji, mousedownale to tylko obejście.

Najlepiej więc 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>
Rozwiń fragment kodu

Musisz uważać, ponieważ wydarzenia mogą się kumulować, a jeśli dodasz wiele wydarzeń, możesz stracić liczenie kolejności, w jakiej są one uruchamiane.

Eduard Florinescu
źródło
1

Jednym z dodatków, do obsługi JavaScript jest użycie nazwanej funkcji.

Oto przykład funkcji anonimowej:

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

Ale wyobraź sobie, że masz kilka z nich podłączonych do tego samego elementu i chcesz usunąć jeden z nich. Nie można usunąć jednej anonimowej funkcji z tego detektora zdarzeń.

Zamiast tego możesz użyć nazwanych funkcji:

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

Dzięki temu kod jest znacznie łatwiejszy do odczytania i utrzymania. Zwłaszcza jeśli twoja funkcja jest większa.

Remi
źródło
Aby uzyskać więcej informacji, „tutorialist” Avelx ma fajny film, który mogę polecić na ten temat: youtube.com/watch?v=7UstS0hsHgI
Remi 5'18
0

Możesz połączyć wszystkie funkcje w jedną i wywołać je. Biblioteki takie jak Ramdajs mają funkcję łączenia wielu funkcji w jedną.

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

lub możesz umieścić kompozycję jako osobną funkcję w pliku js i wywołać ją 

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


<a href="#" onclick="newFunction()">Click me To fire some functions</a>
użytkownik93
źródło
0

Jest to alternatywa dla Brad Anser - możesz użyć przecinka w następujący sposób

onclick="funA(), funB(), ..."

jednak lepiej NIE stosować tego podejścia - w przypadku małych projektów można użyć funkcji onclick tylko w przypadku wywołania jednej funkcji (więcej: zaktualizowany dyskretny javascript ).

Pokaż fragment kodu

Kamil Kiełczewski
źródło