Yükleniyor...

Olay dinleyicileri

Vestiyerde bir askı var. Düğme #peg, üzerinde hang yazıyor. Altında #ticket hâlâ blank diyor.
Önceki sayfa kapı zili ve onclick özelliğiydi. Orada tek yer vardı. İkinci fonksiyon birincinin yerine geçiyordu. Burada o özelliği yazmıyoruz. typeof ve this de o sayfadaydı.
Bu sayfa addEventListener. Çağrı, fonksiyonu düğmenin tıklama listesine ekler. Aynı satır onu çalıştırmaz. peg.click() gelene kadar bilet blank kalır.
Önce wool, sonra silk. İkincisi birincisini kenara itmez. Bir tıklama ikisini de çalıştırır: önce wool, sonra silk. Bilet wool silk olur. Düğmenin yazısı hang kalır.
Aynı wool fonksiyonunu iki kez verirsen, ikincisi bir şey eklemez. Bir tıklama, bir kez.
removeEventListener senin eklediğin fonksiyonu çıkarır. Yeni bir fonksiyon, satırları wool ile aynı olsa bile, başka bir nesnedir. wool yerinde kalır.
Sayfanın betiği ikisini de ekler ve bir kez tıklar. Askının altındaki satır: wool silk / 2 / peg. Burada öğe oluşturmayız, stil yazmayız ve olay argümanını okumayız. O, sonraki sayfa.

İki kanca, tek yer değil

getElementById sana yalnızca düğmeyi ve bilet paragrafını verir. Her addEventListener yanına bir dinleyici daha koyabilir. Tıklama listeyi baştan sona çalıştırır. Bu fonksiyonlar parametre almaz. Olay nesnesi sonraki sayfa.

Kim dinliyor

Düğme hang ile başlar, altı blank. Satırları sırayla oku. Her parça taze düğmeden başlar; sayfa satırı hariç, o alttaki demoda. O demo kimseyi çıkarmaz.

📊 Kim dinliyor

An	Kim dinliyor	Bilet metni	Kolay karışan
`click`, henüz dinleyici yok	kimse	blank	boş tıklama wool yazar
wool için `addEventListener`, `click` öncesi	wool	blank	ekleme çağrısı wool yazar
yalnız wool ile `click`	wool	wool	düğme metni wool olur
önce wool sonra silk, bir `click`	ikisi, wool sonra silk	wool silk	yalnız ikincisi çalışır
wool için `removeEventListener`, sonra `click`	silk	silk	ikisi de hâlâ çalışır
sayfa betiği, bir `click`	ikisi	wool silk	satır hang ile biter

addEventListener("click", wool) wool’u tıklama listesinin sonuna koyar. wool’u çağırmaz. peg.click() bir tıklama gönderir ve listeyi baştan yürütür. Düğmenin kendi metni değişmez.
silk sonradan eklenince wool’un arkasına oturur. İkisi de çalışır. Sıra, ekleme sırasıdır.
Aynı fonksiyon nesnesi iki kez eklenmez. peg.addEventListener("click", wool) ve ardından aynı satır, listeyi bir öğede bırakır. Bir tıklama wool’u bir kez çalıştırır. parts.length 1 olur, bilet wool olur.
removeEventListener("click", wool) o nesneyi çıkarır. silk eklediysen silk kalır. "wool" için push yapan yeni bir fonksiyon eşleşmez. peg.removeEventListener("click", function () { parts.push("wool"); }) sonrası asıl wool listede durur. Tıklama yine wool yazar.
join(" ") yalnızca parts içinde duran kelimelerin arasına boşluk koyar. Boş listeyi burada birleştirmeyiz. Bilet blank kelimesiyle başlar ve yalnızca dinleyicinin içinde değişir.

Henüz kimse dinlemiyor

Dosya düğme ve paragrafla açılır. Dinleyici eklenmemiş. Tıklama gider, bu iki kayıt bilet ile düğmedeki kelimeyi sorar.

Sessiz askı

javascript

let peg = document.getElementById("peg");
let ticket = document.getElementById("ticket");
peg.click();
console.log(ticket.textContent);
console.log(peg.textContent);

Kayıtlar blank ve hang. Tıklama listesi boştu. Paragraf değişmedi.

Dinleyici bekler

addEventListener wool’u saklar. Gövde o satırda çalışmaz. parts boş kalır, bilet blank kalır, düğme hâlâ hang der.

Ekle, çalıştırma

javascript

let peg = document.getElementById("peg");
let ticket = document.getElementById("ticket");
let parts = [];
function wool() {
parts.push("wool");
ticket.textContent = parts.join(" ");
}
peg.addEventListener("click", wool);
console.log(ticket.textContent);
console.log(parts.length);
console.log(peg.textContent);

Kayıtlar blank, 0 ve hang. wool listede. Kimse çağırmadı, bu yüzden parts içinde kelime yok.

click listedekini çalıştırır

Bu parça yine taze düğmeden başlar. Yalnız wool eklenir, sonra peg.click(). Bilet wool olur. Düğme metni hang kalır. parts.length 1’dir.

Tek dinleyici

javascript

let peg = document.getElementById("peg");
let ticket = document.getElementById("ticket");
let parts = [];
function wool() {
parts.push("wool");
ticket.textContent = parts.join(" ");
}
peg.addEventListener("click", wool);
peg.click();
console.log(ticket.textContent);
console.log(peg.textContent);
console.log(parts.length);

Kayıtlar wool, hang ve 1. Bir dinleyici, bir kelime. hang hâlâ düğmedir.

silk, wool’un yanına oturur

Taze düğme. Önce wool, sonra silk, ancak ondan sonra bir click. İki ekleme arasında tıklama yok. wool "wool" koyar ve yazar. silk "silk" koyar ve iki kelimeyi boşlukla yazar. Bilet wool silk. parts.length 2. Düğme hang kalır.

İkisi de çalışır

javascript

let peg = document.getElementById("peg");
let ticket = document.getElementById("ticket");
let parts = [];
function wool() {
parts.push("wool");
ticket.textContent = parts.join(" ");
}
function silk() {
parts.push("silk");
ticket.textContent = parts.join(" ");
}
peg.addEventListener("click", wool);
peg.addEventListener("click", silk);
peg.click();
console.log(ticket.textContent);
console.log(parts.length);
console.log(peg.textContent);

Kayıtlar wool silk, 2 ve hang. silk, wool’u silmedi. Bir tıklama listeyi ekleme sırasında yürüttü.

wool’u askıdan indir

Taze düğme. İki fonksiyon da eklenir, sonra removeEventListener aynı wool fonksiyonuyla çağrılır. silk kalır. Bir click yalnız silk’i çalıştırır. Bilet silk olur, wool silk değil. parts.length 1’dir.

wool’u kaldır

javascript

let peg = document.getElementById("peg");
let ticket = document.getElementById("ticket");
let parts = [];
function wool() {
parts.push("wool");
ticket.textContent = parts.join(" ");
}
function silk() {
parts.push("silk");
ticket.textContent = parts.join(" ");
}
peg.addEventListener("click", wool);
peg.addEventListener("click", silk);
peg.removeEventListener("click", wool);
peg.click();
console.log(ticket.textContent);
console.log(parts.length);
console.log(peg.textContent);

Kayıtlar silk, 1 ve hang. wool, eklediğin nesnenin aynısıydı, bu yüzden listeden çıktı. Alttaki demo kimseyi çıkarmaz.

Askının altında bir satır

Betik body’nin sonundadır; düğme ve paragraflar yerindeyken. wool ekler, sonra silk, sonra bir kez click çağırır. Her fonksiyon hits değerine 1 ekler ve kendi kelimesini koyar. Satır, bilet metnini, sayacı ve peg.id değerini birleştirir. Düğme metnini yazmaz. Olay argümanını okumaz.

Sayfa demosu — askı

html

<!DOCTYPE html>
<html>
<head>
<title>event-listeners — page</title>
</head>
<body>
<button id="peg" type="button">hang</button>
<p id="ticket">blank</p>
<p id="line">…</p>
<script>
let peg = document.getElementById("peg");
let ticket = document.getElementById("ticket");
let parts = [];
let hits = 0;
function wool() {
hits = hits + 1;
parts.push("wool");
ticket.textContent = parts.join(" ");
}
function silk() {
hits = hits + 1;
parts.push("silk");
ticket.textContent = parts.join(" ");
}
peg.addEventListener("click", wool);
peg.addEventListener("click", silk);
peg.click();
document.getElementById("line").textContent =
ticket.textContent + " / " + hits + " / " + peg.id;
</script>
</body>
</html>

Satır şudur: wool silk / 2 / peg. Bilet wool silk, blank değil. Sayaç 2, çünkü iki dinleyici de tek tıklamada çalıştı. Son sözcük düğmenin kimliği, peg.id, hang kelimesi değil. Düğmede hâlâ hang var. Sonraki sayfa olay nesnesi. Bu fonksiyonların almadığı argümanı okur.

Askıda beş kontrol

Dinleyici olmadan tıkla. Bilet blank, düğme hang.
wool ekle, tıklama. Bilet blank, parts.length 0, düğme hang.
wool ekle, sonra tıkla. Bilet wool, düğme hang, parts.length 1.
wool, sonra silk ekle, bir kez tıkla. Bilet wool silk, parts.length 2, düğme hang.
İkisini ekle, wool’u çıkar, sonra tıkla. Bilet silk, parts.length 1, düğme hang. Sayfa satırını oku: wool silk / 2 / peg.

Bu askı nerede şaşırtır

Düğmede hâlâ hang var. Listede iki fonksiyon da vardı, ya da yalnız silk, ya da kimse.

İkinci addEventListener birincinin yerine geçer sanmak, onclick gibi
addEventListener kendisi bileti wool yapar sanmak
İkisi de ekliyken yalnız silk çalışır sanmak
Düğme metni wool olur sanmak
Yeni bir fonksiyonla removeEventListener wool’u çıkarır sanmak
Aynı wool fonksiyonunu iki kez ekleyip iki kez çalışmasını beklemek
Burada onclick, typeof null veya this.id okumak; o zil sayfasıydı
Burada event.target okumak; bu fonksiyonlar argüman almaz, olay nesnesi sonraki sayfa
Düğmeyi createElement ile kurmak; o daha eski bir sayfaydı
Satırı blank / 0 / hang okumak

Kalanlar

Dinleyici yokken peg.click() bileti blank, düğmeyi hang bırakır
addEventListener tıklamaya kadar bileti blank tutar
Yalnız wool ile bir tıklama bileti wool yapar, düğme hang kalır
wool, sonra silk, sonra bir tıklama bileti wool silk yapar
Aynı wool ile removeEventListener, sonra tıklama, bileti silk yapar
Aynı wool iki kez eklenirse bir kez çalışır, yeni fonksiyon onu çıkarmaz
Sayfa satırı wool silk / 2 / peg olur

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓

Sorular

🎯

70%

Geçmek İçin

♾️

∞

Süre

🔄

∞

Deneme

📝 Talimatlar

Her soruyu dikkatle okuyun
Her soru için en iyi cevabı seçin
Quiz'i istediğiniz kadar tekrar alabilirsiniz
İlerlemeniz üstte gösterilecek

Olay dinleyicileri

İki kanca, tek yer değil

Kim dinliyor

📊 Kim dinliyor

Henüz kimse dinlemiyor

Sessiz askı

Dinleyici bekler

Ekle, çalıştırma

click listedekini çalıştırır

Tek dinleyici

silk, wool’un yanına oturur

İkisi de çalışır

wool’u askıdan indir

wool’u kaldır

Askının altında bir satır

Sayfa demosu — askı

Askıda beş kontrol

Bu askı nerede şaşırtır

Kalanlar

🧠 Bilginizi Test Edin

Bilginizi Test Edin

📝 Talimatlar

🚧 Kurs Yakında Geliyor

Course Name

Uygun Olduğunda Bildirim Al

Şimdi Mevcut

Coming Soon

Course Name