Navázání událostí v JavaScriptu

Chceme-li na stránce vykonat nějakou JS akci, zpravidla si vytvoříme funkci, která se ve vhodný okamžik (při spuštění vhodné události) spustí.

HTML atribut

Asi nejjednodušší možnost je použít HTML atribut.

<button onclick="akce()">
  Tlačítko
</button>

Ukázka

Výhodné je, že z HTML kódu je ihned patrné, že se tlačítko používá pro spouštění JS akcí.

Někomu ale může přijít umisťování JS kódu do HTML jako nečisté řešení.

Celé kusy JS

Do on* atributů je možné psát i celé bloky kódu, to ale příliš nedoporučuji.

1. Takový kód není znovupoužitelný.
2. Psaním do řetězce se ve většině editorů připravíme o barvení kódu. A nakonec si tím i vyplácáme jedny uvozovky.

Pseudo-odkaz

Pro klikací události je možné využít běžný HTML odkaz:

<a href="javascript:akce()">
  Odkaz
</a>

Ukázka

Puntičkářům se na tomto způsobu nebude líbit, že bez podpory JavaScriptu je na stránce nefunkční odkaz. Řešení je toto tlačítko při absenci JS skrýt přes CSS.

Nastavování vlastností

První z možností, která odděluje HTML a JS kód, vypadá následovně. V HTML kódu se prvek, ke kterému připojíme událost, poznačí třeba pomocí id (nebo se zajistí, aby se dal rozumně vybrat přes querySelector).

<button id="tlacitko">
  Tlačítko
</button>

Pod tento HTML kód se připojí skript, který si element (v tomto případě podle ID) najde a nastaví mu událost.

// Najití elementu
var element = document.getElementById("tlacitko");
// Nastavení události
element.onclick = akce;

Ukázka

Trochu ošemetné je, že nás může svádět napsat dle zvyku z HTML atributů něco jako:

element.onclick = akce();

To většinou ale není žádoucí, protože jako událost chceme zpravidla připojit danou funkci a ne její výsledek, což by způsobily právě ty dvě závorky (funkce by se zavolala a do onclicku by se přidal její výsledek).

Více funkcí

Má-li se po kliknutí (nebo jiné události) provést více funkcí, řeší se to zpravidla vytvořením anonymní funkce.

element.onclick = function() {
  akce();
  akce2();
};

Zde už je záměrem funkci akce a funkci akce2 zavolat, proto ty ().

Akce přes setAttribute

Připojit událost jde dále metodou setAttribute:

element.setAttribute("onclick", "akce()");

Tím se pro vybraný element docílí podobného efektu jako při použití on* HTML atributu.

Stejně tak trpí toto řešení totožným problémem: psaní skriptu do textového řetězce. Omezuje to znovupoužitelnost a v editoru může být problém se zvýrazňováním syntaxe.

Metody addEventListener/attachEvent

Poslední možnost je používat metodu addEventListener, resp. attachEvent pro starší než IE 9.

element.addEventListener("click", akce);

Pro IE 8 a starší stačí vybrat nějaký polyfill.

Metodě addEventListener se jako první parametr předává název události. Ale už bez on, takže např. click, mousemove a podobně. Druhý parametr je potom funkce, která se má při spuštění události provést. Opět je možné používat i funkci anonymní:

element.addEventListener("click", function() {
  akce();
});

Asi hlavní výhoda tohoto postupu je, že umožňuje pohodlně navazovat do jedné události několik funkcí (ukázka). Obdobný postup by u předchozího způsobu nastavil jen tu poslední akci.