JavaScript HTML DOM Olayları
HTML DOM, JavaScript'in HTML olaylarına tepki vermesine izin verir:
Olaylara Tepki Vermek
JavaScript, bir kullanıcı bir HTML öğesini tıkladığında olduğu gibi, bir olay meydana geldiğinde yürütülebilir.
Bir kullanıcı bir öğeyi tıkladığında kodu yürütmek için bir HTML olay niteliğine JavaScript kodu ekleyin:
onclick=JavaScript
HTML olay örnekleri:
- Kullanıcı fareye tıkladığı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>bir kullanıcı üzerine tıkladığında öğenin içeriği değiştirilir:
Örnek
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>
</body>
</html>
Bu örnekte, olay işleyicisinden bir işlev çağrılır:
Örnek
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Click on this text!</h1>
<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>
Yukarıdaki örnekte displayDate, butona tıklandığında isimli bir fonksiyon yürütülecektir.
HTML DOM Kullanarak Olayları Atayın
HTML DOM, JavaScript kullanarak olayları HTML öğelerine atamanıza olanak tanır:
Örnek
Bir düğme öğesine bir onclick olayı atayın:
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
Yukarıdaki örnekte, adında bir işlev displayDate, id="myBtn".
Düğme tıklandığında işlev yürütülür.
onload ve onunload Olayları
Kullanıcı sayfaya girdiğinde veya sayfadan ayrıldığında onloadve olayları tetiklenir.onunload
Etkinlik onload, ziyaretçinin tarayıcı türünü ve tarayıcı sürümünü kontrol etmek ve bilgilere dayalı olarak web sayfasının uygun sürümünü yüklemek için kullanılabilir.
ve olayları onload, onunloadçerezlerle başa çıkmak için kullanılabilir.
Örnek
<body onload="checkCookies()">
Onchange Etkinliği
Olay onchangegenellikle 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. Bir upperCase()
kullanıcı bir giriş alanının içeriğini değiştirdiğinde işlev çağrılır.
Örnek
<input type="text" id="fname"
onchange="upperCase()">
Onmouseover ve onmouseout Olayları
ve olayları onmouseover, onmouseoutkullanıcı fareyi bir HTML öğesinin üzerine getirdiğinde veya öğenin dışında kaldığında bir işlevi tetiklemek için kullanılabilir:
onmousedown, onmouseup ve onclick Etkinlikleri
, onmousedown, onmouseupve onclickolayların tümü bir fare tıklamasının parçalarıdır. İlk olarak bir fare düğmesine tıklandığında onmousedown olayı tetiklenir, ardından fare düğmesi bırakıldığında onmouseup olayı tetiklenir, son olarak fare tıklaması tamamlandığında onclick olayı tetiklenir.
Daha fazla örnek
Kullanıcı fare düğmesini basılı tuttuğunda bir görüntüyü değiştirin.
Sayfanın yüklenmesi bittiğinde bir uyarı kutusu görüntüler.
Odaklandığında bir giriş alanının arka plan rengini değiştirin.
İmleç üzerinde hareket ettiğinde bir öğenin rengini değiştirir.
HTML DOM Olay Nesnesi Referansı
Tüm HTML DOM olaylarının bir listesi için, eksiksiz HTML DOM Olay Nesnesi Referansımıza bakın .