JavaScript'te Öğelere Olay İşleyicileri Bağlama

Şimdi, DOM öğelerimizin site kullanıcısının eylemlerine tepki vermesini öğretelim. Örneğin, kullanıcı bir yere fareyle tıklayacak ve bizim kodumuz buna yanıt olarak bu tıklamayı işleyecek ve ekrana bir bilgi çıkaracak.

JavaScript aracılığıyla takip edebildiğimiz kullanıcı eylemlerine olaylar (events) denir. Olaylar şunlar olabilir: bir sayfa öğesine fareyle tıklama, fareyi bir sayfa öğesinin üzerine getirme veya tam tersi - fare imlecinin öğeden ayrılması vb. Ayrıca, kullanıcı eylemlerine bağlı olmayan olaylar da vardır, örneğin, HTML sayfasının tarayıcıya yüklenmesi olayı.

Örnek olarak, tıklandığında ekrana bir metin çıkan bir buton yapalım. Öncelikle butonun HTML kodunu yapalım:

<input id="button" type="submit">

Şimdi butona bir referansı bir değişkene alalım:

let button = document.querySelector('#button');

Şimdi butonumuzun üzerine tıklandığında tepkisini belirlememiz gerekiyor. Bunun için JavaScript'te ilk parametresi olayın adını (butona tıklama olayı 'click' adına sahiptir), ikinci parametresi ise bu olay meydana geldiğinde çalışan bir geri çağırım fonksiyonunu (callback) alan özel bir addEventListener metodu vardır.

Örneğin, butona tıklandığında bir metin çıkaralım:

button.addEventListener('click', function() {
	console.log('!!!');
});

3 buton verilmiştir:

<input id="button1" type="submit">
<input id="button2" type="submit">
<input id="button3" type="submit">

İlk butona tıklandığında ekrana 1 sayısı, ikinciye tıklandığında - 2 sayısı, üçüncüye tıklandığında ise - 3 sayısı çıkacak şekilde ayarlayın.