JavaScript HTML DOM Olayları
- Önceki Sayfa DOM Animasyonları
- Sonraki Sayfa DOM Olay Dinleyicileri
HTML DOM, JavaScript'in HTML olaylarına yanıt vermesine izin verir:
Olaya yanıt vermek
JavaScript, olaylar meydana geldiğinde çalışabilir, örneğin kullanıcı bir HTML elementine tıkladığında.
Kullanıcı bir elementi tıkladığında kodun çalışmasını sağlamak için, HTML olay özelliklerine JavaScript kodu ekleyin:
onclick=JavaScript
HTML olaylarının örneği:
- Kullanıcı fareyi tıkladığında
- 当网页加载后
- 当图像加载后
- 当鼠标移至元素上时
- 当输入字段被改变时
- 当 HTML 表单被提交时
- 当用户敲击按键时
在本例中，当用户点击 <h1> 时，会改变其内容：
örnek
<!DOCTYPE html> <html> <body> <h1 onclick="this.innerHTML = 'Hello!'">点击此文本！</h1> </body> </html>
在本例中，从事件处理程序调用函数：
örnek
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">点击此文本！</h1>
<script>
function changeText(id) {
id.innerHTML = "Hello:)";
}
</script>
</body>
</html>
HTML 事件属性
如需向 HTML 元素分配事件，您能够使用事件属性。
örnek
向 button 元素分配 onclick 事件：
<button onclick="displayDate()">试一试</button>
在上例中，名为 displayDate 的函数会在按钮被点击时执行。
使用 HTML DOM 分配事件
HTML DOM 允许您使用 JavaScript 向 HTML 元素分配事件：
örnek
为 button 元素指定 onclick 事件：
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
在上例中，名为 displayDate 的函数被分配到 id="myBtn" 的 HTML 元素。
当点击按钮时将执行函数。
onload ve onunload olayları
当用户进入后及离开页面时，会触发 onload ve onunload 事件。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，然后基于该信息加载网页的恰当版本。
onload ve onunload 事件可用于处理 cookie。
örnek
<body onload="checkCookies()">
onchange olayı
onchange 事件经常与输入字段验证结合使用。
事件经常与输入字段验证结合使用。 onchange örneğinde, kullanıcı girdi alanının içeriğini değiştirdiğinde upperCase() fonksiyonu çağrılır.
örnek
<input type="text" id="fname" onchange="upperCase()">
onmouseover ve onmouseout olayları
onmouseover ve onmouseout Olaylar, kullanıcı HTML elementine fareyi taşıdığında veya çıkardığında bir fonksiyonu tetiklemek için kullanılabilir:
onmousedown, onmouseup ve onclick olayları
onmousedown, onmouseup ve onclick Olaylar tamamen mouse click olayını oluşturur.
Öncelikle fare butonu tıklandığındaonmousedown Olay tetiklendi; ardından fare butonu serbest bırakıldığındaonmouseup Olay tetiklendi; son olarak, fare tıklaması tamamlandıktan sonraonclick Olay tetiklendi.
Daha Fazla Örnek
- onmousedown ve onmouseup
- Kullanıcı fare butonunu bastığında resmi değiştirin.
- onload
- Sayfa tamamen yüklendikten sonra uyarı kutusunu gösterin.
- onfocus
- Giriş alanı odaklandığında arka plan rengi değiştirin.
- Fare Olayları
- İşaretçi elemente taşındığında rengi değiştirin.
HTML DOM Event Nesnesi Kaynak Kılavuzu
Tüm HTML DOM olaylarının listesi için lütfen tam HTML DOM Olay Nesnesi Kaynak Kılavuzu.
- Önceki Sayfa DOM Animasyonları
- Sonraki Sayfa DOM Olay Dinleyicileri
