Tanım
Kullanıcıların web sayfası ile etkileşime girdiği anlarda devreye giren olaylardır. Buton tıklamaları, klavye tuşlarına basma veya fare hareketleri gibi olaylar, sayfaları daha dinamik ve kullanıcı dostu hale getirir. Bu olaylar sayesinde belirli kodları çalıştırmak, veri kontrolü yapmak veya içerikleri anında güncellemek mümkün olur.
Kullanım Alanları ve Örnekler
Buton Tıklanma
Butona tıklandığında bir uyarı göstermek için:
document.getElementById('myButton').addEventListener('click', function() {
alert('Button clicked!');
});Fare ile Gezinme
Fareyle bir div üzerine gelindiğinde arka planı değiştirmek için:
document.getElementById('myDiv').addEventListener('mouseenter', function() {
this.style.backgroundColor = 'lightblue';
});
document.getElementById('myDiv').addEventListener('mouseleave', function() {
this.style.backgroundColor = 'transparent';
});Form Gönderimi
Form gönderimi sırasında veri kontrolü yapmak için:
document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault(); // Formun otomatik gönderimini durdurur
let input = document.getElementById('textInput').value;
if (input === '') {
alert('Giriş boş olamaz!');
} else {
console.log('Form şu giriş ile gönderildi: ' + input);
}
});