HTML DOM JavaScript HTML olaylara tepki verir:
Olaylar tepki gösteren
Bir olay, bir kullanıcı bir HTML öğesini tıkladığında gibi oluştuğunda bir JavaScript yürütülebilir.
Bir kullanıcı bir öğesini tıkladığında kodu çalıştırmak için, bir HTML olay özniteliği için JavaScript kodu ekleyin:
onclick= HTML olayları örnekler: - Bir kullanıcı fareyi tıkladığında
- Bir web sayfası yüklenmeden zaman
- Bir görüntü yüklendikten sonra
- Bir öğenin üstündeyken fare hareket ettiğinde
- bir giriş alanı değiştirildiğinde
- bir HTML formu gönderildiğinde
- Bir kullanıcı bir tuşa vuruşları zaman
Bu örnekte, içeriği <h1> Bir kullanıcı tıkladığında elemanı değiştirilir:
Örnek
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>
</body>
</html>
Kendin dene " Bu örnekte, bir işlev olay işleyicisi ç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>
Kendin dene "
HTML Olay Özellikleri
Eğer olay özelliklerini kullanabilirsiniz HTML öğeleri için olayları atamak için.
Örnek
Bir düğme elemana onclick olayı ata:
<button onclick="displayDate()">Try it</button>
Kendin dene " Yukarıdaki örnekte, adlı bir işlev displayDate butonuna tıklandığında çalıştırılacaktır.
HTML DOM kullanarak Olaylar atama
HTML DOM JavaScript kullanarak HTML öğelerine olayları atamak sağlar:
Örnek
Bir düğme elemana onclick olayı ata:
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
Kendin dene " Yukarıdaki örnekte, adlı bir fonksiyon displayDate ile HTML öğesine atanan id="myBtn" .
butonuna tıklandığında işlev çalıştırılır.
onload ve onunload Olaylar
onload ve onunload kullanıcının girdiği veya sayfayı ayrıldığında olaylar tetiklenir.
onload olay ziyaretçinin tarayıcı tipi ve tarayıcı sürümünü kontrol edin ve bilgilere dayanarak web sayfasının doğru sürümünü yüklemek için kullanılabilir.
onload ve onunload olaylar ile başa çıkmak için kullanılabilecek cookies .
onchange Olay
onchange olay genellikle giriş alanlarının doğrulama ile kombinasyon halinde kullanılır.
Aşağıda nasıl kullanılacağına ilişkin bir örnektir onchange . upperCase() , bir kullanıcı bir giriş alanının içeriğini değiştirdiğinde fonksiyonu olarak adlandırılır.
onmouseover ve onmouseout Olaylar
onmouseover ve onmouseout olaylar kullanıcı fareyle üzerine geldiğinde bir işlevi tetiklemek için kullanılan ya edilebilir bir HTML elemanının dışarı:
Fare Üzeri Me
onmousedown , onmouseup ve onclick Olaylar
onmousedown , onmouseup ve onclick olaylar fare tıklama birer parçasıdır. Bir fare düğmesi tıklandığında Birincisi, onmousedown olayı tetiklenir, fare düğmesi serbest bırakıldığında, sonra onmouseup fare tıklatma tamamlandığında olayı tetiklenir nihayet, onclick olayı tetiklenir.
" onmousedown="mDown(this)" onmouseup="mUp(this)">
Click Me
Diğer Örnekler
onmousedown ve onmouseup
Bir kullanıcı fare düğmesini basılı tuttuğunda bir görüntü değiştirin.
onload
sayfanın yüklenmesi tamamlandıktan bir uyarı kutusu görüntüler.
onfocus
odağı aldığında bir giriş alanının arka plan rengini değiştirelim.
Fare Olaylar
İmleç üzerine hareket ettiğinde bir elementin rengini değiştirin.
HTML DOM Olay Nesne Referans
Tüm HTML DOM Olaylar listesi için lütfen tüm bakmak HTML DOM Olay Nesne Referans .
Egzersizleri ile Yourself test edin!
Egzersiz 1 » Alıştırma 2» Egzersiz 3 »