logo

JavaScript události onclick() – výukový program s příklady

JavaScript přidává webovým stránkám interaktivitu. Tento článek ukazuje, jak spouštět funkce JavaScriptu při kliknutí na prvek HTML pomocí onclick() události a atributy. Zahrnuty příklady kódu.

Události JavaScriptu

 událost v JavaScriptu jednoduše znamená, že se něco stalo. Myš se pohnula nebo byla stisknuta klávesa a JavaScript byl upozorněn vyvoláním události .

onclick Událost

Když uživatel na něco klikne, onclick událost je vyvolána, což vám umožní spustit nějaký kód JavaScript, když se klikne na prvek.

Definování onclick Události

Existuje několik způsobů, jak definovat události onclick, které jsou popsány níže.

Inline HTML

První metodou je jednoduše umístit kód JavaScript do atributu onclick uvnitř značky HTML pro prvek, na který chcete kliknout:

<element onclick="myFunction">

Všimněte si, že:

Příklad

<a href="#" onclick="alert("You clicked me!");">Click me!</a>

Výše je definován odkaz HTML. Obvykle href atribut odkazuje na adresu jiného webu nebo stránky, ale v tomto případě je nastaven na # – což znamená, že nikam nevede.

 onclick byl přidán atribut, který zobrazí upozornění JavaScript.

Po kliknutí na odkaz se spustí událost onclick a zobrazí se výstraha.

Obsluhy událostí

Pokud budete kód JavaScript udržovat oddělený od kódu HTML, bude váš kód celkově lépe spravovatelný – při ladění nebo aktualizaci logiky JavaScriptu nemusíte prohledávat HTML. Následující metody oddělují onclick úplně obslužné rutiny událostí:

object.onclick = function(){myFunction};

Všimněte si, že:

  • objekt je odkaz na prvek HTML, na který chcete kliknout
  • myFunction je kód, který chcete spustit po kliknutí

Příklad

<button id="clickable">Click me!</button>

<script>
    document.getElementById("clickable").onclick = function() {alert("You clicked me!");};
</script>

Jak vidíte, všechny JavaScripty jsou nyní na stejném místě, takže můžete přesně vidět, co se děje. Část HTML obsahuje pouze prvek, který se má zobrazit uživateli – logika je oddělená.

Posluchači událostí

Posluchače událostí lze použít ke stejnému účelu jako výše – k oddělení logiky JavaScriptu od rozvržení HTML.

object.addEventListener("click", myFunction);

Příklad

<button id="clickable">Click me!</button>

<script>
    document.getElementById("clickable").addEventListener("click", alert("You clicked me!")); 
</script>

Jedno běžné použití pro onclick() je obnovit stránku ve webovém prohlížeči.

Chcete-li se dozvědět více o přidávání interaktivity na webové stránky pomocí JavaScriptu, podívejte se do dokumentu Mozilla Developer.


No