JavaScript DOM události

Obsah

    Zobrazit obsah

HTML DOM umožňuje JavaScriptu reagovat na události HTML:

Mouse Over Me
Click Me

Reakce na události

JavaScript lze spustit, když dojde k události, například když uživatel klikne na prvek HTML.

Chcete-li spustit kód, když uživatel klikne na prvek, přidejte kód JavaScript do atributu události HTML:

onclick=JavaScript

Příklady událostí HTML:

  • Když uživatel klikne myší

  • Když se načte webová stránka

  • Po načtení obrázku

  • Když se myš pohybuje nad prvkem

  • Když se změní vstupní pole

  • Při odeslání formuláře HTML

  • Když uživatel stiskne klávesu

V tomto příkladu se obsah prvku <h1> změní, když na něj uživatel klikne:

Příklad

<!DOCTYPE html>
<html>
<body>

<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>

</body>
</html>

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML Events</h2>
<h2 onclick="this.innerHTML='Ooops!'">Click on this text!</h2>

</body>
</html>

V tomto příkladu je funkce volána z obsluhy události:

Příklad

<!DOCTYPE html>
<html>
<body>

<h1 onclick="changeText(this)">Click on this text!</h1>
 
<script>
function changeText(id) {

  id.innerHTML = "Ooops!";
}
</script>

</body>
</html>

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML Events</h2>
<h2 onclick="changeText(this)">Click on this text!</h2>

<script>
function changeText(id) {
  id.innerHTML = "Ooops!";
}
</script>

</body>
</html>

Atributy události HTML

Chcete-li přiřadit události k prvkům HTML, můžete použít atributy událostí.

Příklad

Přiřaďte událost onclick prvku tlačítka:

<button onclick="displayDate()">Try it</button>

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML Events</h2>
<p>Click the button to display the date.</p>

<button onclick="displayDate()">The time is?</button>

<script>
function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}
</script>

<p id="demo"></p>

</body>
</html>

Ve výše uvedeném příkladu bude provedena funkce s názvem displayDate po kliknutí na tlačítko.

Přiřaďte události pomocí HTML DOM

HTML DOM vám umožňuje přiřadit události k prvkům HTML pomocí JavaScriptu:

Příklad

Přiřaďte událost onclick prvku tlačítka:

<script>
document.getElementById("myBtn").onclick = displayDate;
</script>

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML Events</h2>
<p>Click "Try it" to execute the displayDate() function.</p>

<button id="myBtn">Try it</button>

<p id="demo"></p>

<script>
document.getElementById("myBtn").onclick = displayDate;

function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}
</script>

</body>
</html>

Ve výše uvedeném příkladu je funkce s názvem displayDate přiřazena prvek HTML s id="myBtn".

Funkce bude provedena po kliknutí na tlačítko.

Události onload a onunload

Události onload a onunload se spouštějí, když uživatel vstoupí na stránku nebo ji opustí.

Událost onload lze použít ke kontrole typu prohlížeče a verze prohlížeče návštěvníka a na základě informací načíst správnou verzi webové stránky.

Události onload a onunload lze použít ke zpracování souborů cookie.

Příklad

<body onload="checkCookies()">

Zkuste to sami →

<!DOCTYPE html>
<html>
<body onload="checkCookies()">

<h2>JavaScript HTML Events</h2>

<p id="demo"></p>

<script>
function checkCookies() {
  var text = "";
  if (navigator.cookieEnabled == true) {
    text = "Cookies are enabled.";
  } else {
    text = "Cookies are not enabled.";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>

Událost při změně

Událost onchange se často používá v kombinaci s ověřením vstupních polí.

Níže je uveden příklad použití onchange. upperCase() funkce bude volána, když uživatel změní obsah vstupního pole.

Příklad

<input type="text" id="fname"
onchange="upperCase()">

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML Events</h2>
Enter your name: <input type="text" id="fname" onchange="upperCase()">
<p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p>

<script>
function upperCase() {
  const x = document.getElementById("fname");
  x.value = x.value.toUpperCase();
}
</script>

</body>
</html>

Události onmouseover a onmouseout

Události onmouseover a onmouseout lze použít ke spuštění funkce, když uživatel najede myší. nad nebo mimo element HTML:

Mouse Over Me

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" 
style="background-color:#D94A38;width:120px;height:20px;padding:40px;">
Mouse Over Me</div>

<script>
function mOver(obj) {
  obj.innerHTML = "Thank You"
}

function mOut(obj) {
  obj.innerHTML = "Mouse Over Me"
}
</script>

</body>
</html>

Události onmousedown, onmouseup a onclick

Události onmousedown, onmouseup a onclick jsou všechny části a kliknutí myší. Nejprve po kliknutí na tlačítko myši dojde k události onmousedown spustí se, když stisknete tlačítko myši je uvolněna, spustí se událost onmouseup a nakonec, když je kliknutí myší dokončeno, je spuštěna událost onclick.

Click Me

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<div onmousedown="mDown(this)" onmouseup="mUp(this)"
style="background-color:#D94A38;width:90px;height:20px;padding:40px;">
Click Me</div>

<script>
function mDown(obj) {
  obj.style.backgroundColor = "#1ec5e5";
  obj.innerHTML = "Release Me";
}

function mUp(obj) {
  obj.style.backgroundColor="#D94A38";
  obj.innerHTML="Thank You";
}
</script>

</body>
</html>

Další příklady

onmousedown a onmouseup

<!DOCTYPE html>
<html>
<head>
<script>
function lighton() {
  document.getElementById('myimage').src = "bulbon.gif";
}
function lightoff() {
  document.getElementById('myimage').src = "bulboff.gif";
}
</script>
</head>

<body>

<img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="bulboff.gif" width="100" height="180" />

<p>Click mouse and hold down!</p>

</body>
</html>

Změňte obrázek, když uživatel podrží tlačítko myši.

načíst

<!DOCTYPE html>
<html>
<head>

<script>
function mymessage() {
  alert("This message was triggered from the onload event");
}
</script>
</head>

<body onload="mymessage()">
</body>

</html>

Po dokončení načítání stránky zobrazit okno s upozorněním.

zaměření

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(x) {
  x.style.background = "yellow";
}
</script>
</head>
<body>

Enter your name: <input type="text" onfocus="myFunction(this)">

<p>When the input field gets focus, a function is triggered which changes the background-color.</p>

</body>
</html>

Změňte barvu pozadí vstupního pole, když je aktivní.

Události myši

<!DOCTYPE html>
<html>
<body>

<h1 onmouseover="style.color='red'"
onmouseout="style.color='black'">
Mouse over this text</h1>

</body>
</html>

Změňte barvu prvku, když na něj přejedete kurzorem.

Odkaz na objekt události HTML DOM

Seznam všech událostí HTML DOM naleznete v naší úplné Referenční příručce objektu událostí HTML DOM.