JavaScript DOM Olayları

İçindekiler

HTML DOM, JavaScript'in HTML olaylarına tepki vermesine olanak tanır:

Mouse Over Me

Click Me

Olaylara Tepki Verme

Bir kullanıcının bir HTML öğesine tıklaması gibi bir olay meydana geldiğinde bir JavaScript çalıştırılabilir.

Kullanıcı bir öğeyi tıkladığında kodu çalıştırmak için HTML olayı özelliğine JavaScript kodu ekleyin:

onclick=JavaScript

HTML olaylarına örnekler:

Kullanıcı fareyi tıklattığında
Bir web sayfası yüklendiğinde
Bir resim yüklendiğinde
Fare bir öğenin üzerine geldiğinde
Bir giriş alanı değiştirildiğinde
Bir HTML formu gönderildiğinde
Kullanıcı bir tuşa bastığında

Bu örnekte, <h1> öğesinin içeriği, kullanıcı tıkladığında değişir:

Örnek

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Kendiniz Deneyin →

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Bu örnekte olay işleyicisinden bir işlev çağrıldı:

Örnek

<!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

Kendiniz Deneyin →

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

Olayları HTML öğelerine atamak için olay niteliklerini kullanabilirsiniz.

Örnek

Bir düğme öğesine bir onclick olayı atayın:

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

Kendiniz Deneyin →

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

Yukarıdaki örnekte displayDate adlı bir işlev yürütülecektir. düğmeye tıklandığında.

HTML DOM'yi Kullanarak Olayları Atama

HTML DOM, JavaScript kullanarak HTML öğelerine etkinlik atamanıza olanak tanır:

Örnek

Bir düğme öğesine bir onclick olayı atayın:

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

Kendiniz Deneyin →

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

Yukarıdaki örnekte displayDate adlı bir işlev şuraya atanmıştır: id="myBtn" içeren bir HTML öğesi.

Fonksiyon yürütülecek düğmeye tıklandığında.

Onload ve onunload Olayları

Kullanıcı sayfaya girdiğinde veya sayfadan çıktığında onload ve onunload olayları tetiklenir.

onload olayı, ziyaretçinin tarayıcı türünü ve tarayıcı sürümünü kontrol etmek ve bilgilere göre web sayfasının uygun sürümünü yüklemek için kullanılabilir.

Çerezlerle ilgilenmek için onload ve onunload olayları kullanılabilir.

Örnek

<body onload="checkCookies()">

Kendiniz Deneyin →

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

Değişim Etkinliği

onchange olayı genellikle giriş alanlarının doğrulanmasıyla birlikte kullanılır.

Aşağıda onchange'in nasıl kullanılacağına dair bir örnek verilmiştir. upperCase() Kullanıcı bir giriş alanının içeriğini değiştirdiğinde işlev çağrılacaktır.

Örnek

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

Kendiniz Deneyin →

<!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 ve onmouseout Olayları

onmouseover ve onmouseout olayları, kullanıcı fareyi tuttuğunda bir işlevi tetiklemek için kullanılabilir bir HTML öğesinin üzerinde veya dışında:

Mouse Over Me

Kendiniz Deneyin →

<!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 ve onclick Olayları

onmousedown, onmouseup ve onclick olayları hepsi bir şeyin parçaları fare tıklaması. İlk olarak bir fare düğmesine tıklandığında onmousedown olayı daha sonra fare düğmesine basıldığında tetiklenir serbest bırakıldığında onmouseup olayı tetiklenir, son olarak fare tıklaması tamamlandığında onclick olayı tetiklenir.

Click Me

function mDown(obj) { obj.style.backgroundColor="#1ec5e5"; obj.innerHTML="Release Me" } function mUp(obj) { obj.style.backgroundColor="#D94A38"; obj.innerHTML="Thank You" }

Kendiniz Deneyin →

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

Daha fazla örnek

fare aşağı ve fare yukarı

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

Kullanıcı fare düğmesini basılı tuttuğunda görüntüyü değiştirin.

aşırı yük

<!DOCTYPE html>
<html>
<head>

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

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

</html>

Sayfanın yüklenmesi tamamlandığında bir uyarı kutusu görüntüleyin.

odaklan

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

Odaklandığında giriş alanının arka plan rengini değiştirin.

Fare Olayları

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

İmleç bir öğenin üzerine geldiğinde öğenin rengini değiştirin.

HTML DOM Olay Nesnesi Referansı

Tüm HTML DOM olaylarının bir listesi için tam HTML DOM Olay Nesnesi Referansımıza bakın.