JavaScript DOM események

Tartalomjegyzék

    Tartalomjegyzék megjelenítése

A HTML DOM lehetővé teszi a JavaScript számára, hogy reagáljon a HTML eseményekre:

Mouse Over Me
Click Me

Reagálás az eseményekre

A JavaScript akkor hajtható végre, amikor egy esemény bekövetkezik, például amikor a felhasználó egy HTML-elemre kattint.

A kód futtatásához, amikor a felhasználó egy elemre kattint, adjon hozzá JavaScript kódot egy HTML eseményattribútumhoz:

onclick=JavaScript

Példák HTML eseményekre:

  • Amikor a felhasználó rákattint az egérrel

  • Amikor egy weboldal betöltődött

  • Amikor egy kép betöltődött

  • Amikor az egeret egy elem fölé viszi

  • Amikor egy beviteli mező megváltozik

  • HTML űrlap elküldésekor

  • Amikor a felhasználó megnyom egy billentyűt

Ebben a példában a <h1> elem tartalma megváltozik, amikor a felhasználó rákattint:

Példa

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Ebben a példában egy függvényt hívunk meg az eseménykezelőből:

Példa

<!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

Próbálja ki Ön is →

<!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>

HTML eseményattribútumok

Az események HTML-elemekhez rendeléséhez eseményattribútumokat használhat.

Példa

Onclick esemény hozzárendelése egy gombelemhez:

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

Próbálja ki Ön is →

<!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>

A fenti példában egy displayDate nevű függvény kerül végrehajtásra amikor a gombra kattintanak.

Események hozzárendelése a HTML DOM használatával

A HTML DOM lehetővé teszi események hozzárendelését HTML elemekhez JavaScript használatával:

Példa

Onclick esemény hozzárendelése egy gombelemhez:

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

Próbálja ki Ön is →

<!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>

A fenti példában a displayDate nevű függvény hozzá van rendelve egy HTML-elem id="myBtn"-val.

A funkció végrehajtásra kerül amikor a gombra kattintanak.

A be- és kiürítési események

A onload és onload események akkor indulnak el, amikor a felhasználó belép az oldalra, vagy elhagyja azt.

Az onload esemény segítségével ellenőrizhető a látogató böngészője típusa és verziója, valamint az információk alapján a weboldal megfelelő verziója tölthető be.

Az onload és onunload események használhatók a cookie-k kezelésére.

Példa

<body onload="checkCookies()">

Próbálja ki Ön is →

<!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>

Az onchange esemény

Az onchange eseményt gyakran a beviteli mezők érvényesítésével együtt használják.

Az alábbiakban egy példa látható az onchange használatára. A nagybetű() függvény akkor kerül meghívásra, ha a felhasználó megváltoztatja a beviteli mező tartalmát.

Példa

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

Próbálja ki Ön is →

<!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>

Az onmouseover és onmouseout események

Az onmouseover és onmouseout események felhasználhatók egy függvény aktiválására, amikor a felhasználó egérrel lép fel egy HTML-elem felett vagy azon kívül:

Mouse Over Me

Próbálja ki Ön is →

<!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>

Az onmousedown, onmouseup és onclick események

Az onmousedown, onmouseup és onclick események mind részei a egérkattintás. Amikor először kattintunk egy egérgombra, az onmousedown esemény következik be akkor aktiválódik, amikor az egérgombot megnyomja felszabadul, az onmouseup esemény aktiválódik, végül, amikor az egérkattintás befejeződött, az onclick esemény aktiválódik.

Click Me

Próbálja ki Ön is →

<!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>

További példák

onmousedown és 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>

Kép módosítása, amikor a felhasználó lenyomva tartja az egérgombot.

Feltöltés alatt

<!DOCTYPE html>
<html>
<head>

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

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

</html>

Jelenítsen meg egy figyelmeztető mezőt, amikor az oldal betöltődött.

onfókusz

<!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>

Módosítsa a beviteli mező háttérszínét, amikor az fókuszba kerül.

Egér események

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Módosítsa egy elem színét, amikor a kurzor fölé viszi.

HTML DOM eseményobjektum hivatkozás

Az összes HTML DOM esemény listájához tekintse meg teljes HTML DOM eseményobjektum-referenciánkat.