JavaScript DOM-händelser


Innehållsförteckning

    Visa innehållsförteckning


HTML DOM tillåter JavaScript att reagera på HTML-händelser:

Mouse Over Me
Click Me

Reagerar på händelser

En JavaScript kan köras när en händelse inträffar, som när en användare klickar på ett HTML-element.

För att köra kod när en användare klickar på ett element, lägg till JavaScript-kod till ett HTML-händelseattribut:

onclick=JavaScript

Exempel på HTML-händelser:

  • När en användare klickar med musen

  • När en webbsida har laddats

  • När en bild har laddats

  • När musen rör sig över ett element

  • När ett inmatningsfält ändras

  • När ett HTML-formulär skickas

  • När en användare trycker på en tangent

I det här exemplet ändras innehållet i elementet ><h1> när en användare klickar på det:

Exempel

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Prova själv →

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

I det här exemplet anropas en funktion från händelsehanteraren:

Exempel

<!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

Prova själv →

<!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-händelseattribut

För att tilldela händelser till HTML-element kan du använda händelseattribut.

Exempel

Tilldela en onclick-händelse till ett knappelement:

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

Prova själv →

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

I exemplet ovan kommer en funktion med namnet displayDate att exekveras när knappen klickas.


Tilldela händelser med HTML DOM

HTML DOM låter dig tilldela händelser till HTML-element med hjälp av JavaScript:

Exempel

Tilldela en onclick-händelse till ett knappelement:

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

Prova själv →

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

I exemplet ovan är en funktion med namnet displayDate tilldelad till ett HTML-element med id="myBtn".

Funktionen kommer att köras när knappen klickas.


Onload och onunload-händelserna

Händelserna onload och onunload utlöses när användaren går in på eller lämnar sidan.

Händelsen onload kan användas för att kontrollera besökarens webbläsartyp och webbläsarversion, och ladda den korrekta versionen av webbsidan baserat på informationen.

Händelserna onload och onunload kan användas för att hantera cookies.

Exempel

<body onload="checkCookies()">

Prova själv →

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

Onchange-evenemanget

Händelsen onchange används ofta i kombination med validering av inmatningsfält.

Nedan är ett exempel på hur man använder onchange. upperCase() funktionen kommer att anropas när en användare ändrar innehållet i ett inmatningsfält.

Exempel

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

Prova själv →

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

Onmouseover och onmouseout-händelserna

Händelserna onmouseover och onmouseout kan användas för att utlösa en funktion när användaren för musen över eller utanför ett HTML-element:

Mouse Over Me

Prova själv →

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

Onmousedown, onmouseup och onclick Events

Händelserna onmousedown, onmouseup och onclick är alla delar av en musklick. Först när en musknapp klickas, är onmousedown-händelsen utlöses då när musknappen släpps, utlöses onmouseup-händelsen, slutligen, när musklicket är slutfört, utlöses onclick-händelsen.

Click Me

Prova själv →

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

Fler exempel

onmousedown och 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>

Ändra en bild när en användare håller ner musknappen.

ladda

<!DOCTYPE html>
<html>
<head>

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

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

</html>

Visa en varningsruta när sidan har laddats klart.

på fokus

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

Ändra bakgrundsfärgen för ett inmatningsfält när det får fokus.

Mouse Events

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Ändra färgen på ett element när markören flyttas över det.


HTML DOM-händelseobjektreferens

För en lista över alla HTML DOM-händelser, titta på vår fullständiga HTML DOM Event Object Reference.