Javascript html dom eventleri ile html elementlerinde bir olay olduğunda javascript kodunu çalıştırabiliriz.

Bir html koduna javascript event atamak için kullanılan birden fazla yol vardır

1.yolumuz in-line kullanım;

<h1 onclick="this.innerHTML = 'Bana tıkladın!'">Bana tıkla</h1>

Yukarıda h1 tagımıza tıklandığında 'Bana tıkla' yazısını 'Bana tıkladın!' olarak değiştirmek üzere bir javascript kodunu onclick eventiyle çalıştırdık.

Aynı şekilde in-line olarak yazdığımız bir fonksiyonuda çalıştırabiliriz.

<h1 onclick="changeText(this)">Bana tıkla</h1>

<script>
function changeText(id) {
 id.innerHTML = "Bana tıkladın!";
}
</script>

2.yol ise script tagları içerisinde eventleri html'e bağlayabiliriz.

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

onclick eventi gibi aklıma gelen bazı html dom eventler;

onload - onunload -> Kullanıcının sayfaya giriş çıkış yaptığı zamanlarda tetiklenir, browser bilgileri, cookieler için kullanımı yaygındır.

onchange -> Form doğrulamada yoğunlukla kullanılan bu event, bir eleman üzerinde değişiklik yapıldığında tetiklenir.

onmouseover - onmouseout -> Fare imleci atanan html elementin üstüne geldiğinde onmouseover tetiklenirken, bu elementin üzerinden çıktığında onmouseout tetiklenir.

onmousedown - onmouseup -> Fare ile tıkladığınızda onmousedown, tıklama işlemini bıraktığınızda yani parmağınızı kaldırdığınızda onmouseup tetiklenir.q