Yükleniyor...

Olay delegasyonu

Gişede bir şerit var. Üst öğe #strip. Üzerinde baştan iki düğme duruyor: metni red olan #red ve metni blue olan #blue. Şeridin altında #note hâlâ blank der.
Her düğmeye ayrı dinleyici koyma. addEventListener bir kez şeridin kendisine yeter. İçerideki bir düğmenin tıklaması şeride çıkar. event.target o düğmedir. event.currentTarget şerittir, yani bu dinleyicinin oturduğu öğe.
#gold düğmesi henüz sayfada yok. Dinleyici kaydedildikten sonra oluşur, şeride eklenir ve tıklanır. Aynı işlev yine çalışır. Fiş gold olur. Betik önce red’e, sonra blue’ya, sonra gold’a tıklar. addEventListener bir kez çağrıldı, bu yüzden hands 1’dir. Şeridin altındaki satır şudur: red / blue / gold / 1. Bu düğmeler type="button". Burada preventDefault ve stopPropagation yok. Onlar plaket sayfasındaydı; orada dinleyiciden sonra çocuk eklenmedi.

Her bilet için tek dinleyici

Plaket sayfası parametreye event adını verdi ve duvarın içindeki bir bağlantıda type, target ve currentTarget okudu. Satırı click / seal / plaque / true / quiet idi. Askı wool ve silk işlevlerini parametresiz tuttu. Satırı wool silk / 2 / peg idi. Burada parametre event kalır, ama target başka iş görür: hangi çocuğun tıklandığını söyler, o çocuk henüz yokken de.
getElementById sana yalnızca şeridi, kırmızı düğmeyi, mavi düğmeyi ve fişi verir. gold, createElement ile doğar. red üzerindeki bir dinleyici ile blue üzerindeki bir başkası gold’u kaçırır; appendChild sonrası yeniden takmazsan. Şeritteki tek dinleyici o ikinci takmaya gerek duymaz. currentTarget değerini işlevin içinde oku. İşlev dönünce bu özellik null olur.

Şerit neyi yazar

Fiş blank ile başlar. Düğme yazıları red ve blue kalır, gold sonra gelir. Satırları sırayla oku. Her parça iki düğmeli şeritten başlar; sayfa satırı hariç, o alttaki demodur. O demo addEventListener çağrısını bir kez yapar.

📊 Şerit neyi yazar

An Ne okursun Fiş metni Kolay karışan
dinleyici şeritte, red tıklanınca event.target.id red currentTarget okumak, o strip’tir
aynı tıklama, currentTarget okumak event.currentTarget.id strip bilet kimliğini okumak
aynı dinleyici, blue tıklanınca event.target.id blue blue’ya kendi dinleyicisini vermek
dinleyiciden sonra gold, sonra tıklama event.target.id gold yeni düğme susar sanmak
şeridin kendisine tıklama, nöbetçiyle fiş skip strip kimliğini yazmak
sayfa betiği satır red / blue / gold / 1 plaket satırı ya da sonda 3

Düğmeye tıklamak tek bir olaydır. Yoldaki her dinleyici için target o düğme kalır. Burada tek dinleyici var, şeritte; işlev çalışırken currentTarget şerittir. Tıklama şeride varır çünkü kimse stopPropagation çağırmaz. Plaket sayfası o yolu kesmişti. Bu sayfa kesmez.
preventDefault tarayıcının varsayılan işi içindir, örneğin bir bağlantının sayfadan ayrılması. Bunlar düğmedir, bağlantı değil. preventDefault çağırmamak eksik satır değil, sayfanın kendisidir.
event.target ile event.currentTarget aynı düğümse tıklama şeride inmiştir, düğmeye değil. İşlev skip yazar ve kâğıdı bilet saymaz. seen.join(" / ") yalnızca seen içine girmiş kimlikleri birleştirir. hands ondan sonra gelir. Son parça, addEventListener kaç kez çağrıldıysa odur; kaç bilet tıklandıysa o değil.

Tıklamanın altındaki bilet

Dinleyici şerittedir. İşlev parametreye event der ve event.target.id değerini fişe yazar. Sonra sayfa red’e tıklar. red üzerinde addEventListener çağırmaz.

Bileti okumak

javascript 
let strip = document.getElementById("strip");
let note = document.getElementById("note");
function take(event) {
note.textContent = event.target.id;
}
strip.addEventListener("click", take);
document.getElementById("red").click();
console.log(note.textContent);

Çıktı red olur. Dinleyicinin öğesi şerittir. target üst öğeyi söylemez. Tıklamanın altındaki düğmeyi söyler.

Dinleyici kimin

Taze şerit, aynı dinleyici, red üzerinde aynı tıklama. Fiş iki kimliği yazar: önce target, sonra currentTarget.

İki kimliği okumak

javascript 
let strip = document.getElementById("strip");
let note = document.getElementById("note");
function take(event) {
note.textContent = event.target.id + " " + event.currentTarget.id;
}
strip.addEventListener("click", take);
document.getElementById("red").click();
console.log(note.textContent);

Çıktı red strip olur. İlk sözcük bilettir. İkincisi bu dinleyicinin oturduğu öğedir. Dinleyici doğrudan red üzerinde olsaydı ve red tıklansaydı çıktı red red olurdu. Bu okuma şeridi kullanır, bu yüzden iki kimlik ayrılır.

Baştan yanında duran bilet

Yine taze şerit. Tek dinleyici, hâlâ yalnızca şeritte. Bu kez tıklama blue. blue baştan işaretlemedeydi. Kendi dinleyicisi yok.

Yandaki bileti duymak

javascript 
let strip = document.getElementById("strip");
let note = document.getElementById("note");
function take(event) {
note.textContent = event.target.id;
}
strip.addEventListener("click", take);
document.getElementById("blue").click();
console.log(note.textContent);

Çıktı blue olur. Tek addEventListener şeridin içinde önceden duran iki düğmeyi de kapsadı. blue, red’in yerini almadı. red ikinci bir çağrı istemedi.

Sonra basılan bilet

Önce dinleyici kaydedilir. Sonra sayfa bir düğme kurar, kimliğini gold yapar, type değerini button yapar, metni gold yazar ve şeride ekler. Ancak ondan sonra gold’a tıklar.

Geç eklenen bileti duymak

javascript 
let strip = document.getElementById("strip");
let note = document.getElementById("note");
function take(event) {
note.textContent = event.target.id;
}
strip.addEventListener("click", take);
let gold = document.createElement("button");
gold.id = "gold";
gold.type = "button";
gold.textContent = "gold";
strip.appendChild(gold);
gold.click();
console.log(note.textContent);

Çıktı gold olur. addEventListener çalışırken gold yoktu. Tıklama gold’dan şeride çıkar ve target gold olur. gold üzerine dinleyici takmazsın.

Kâğıda tıklama

Şeridin kendisi de tıklanabilir bir düğümdür. Tıklamanın target değeri şeritse saklanacak bilet kimliği yoktur. İşlev target ile currentTarget değerini karşılaştırır. İkisi aynıysa fiş skip olur.

Şerit tıklamasını geçmek

javascript 
let strip = document.getElementById("strip");
let note = document.getElementById("note");
function take(event) {
if (event.target === event.currentTarget) {
note.textContent = "skip";
return;
}
note.textContent = event.target.id;
}
strip.addEventListener("click", take);
strip.click();
console.log(note.textContent);

Çıktı skip olur. Hem target hem currentTarget şerittir, nöbetçi kâğıdı geri çevirir. red tıklaması hâlâ red yazar, çünkü iki başvuru farklıdır. Nöbetçiyi çıkarırsan strip.click() fişe strip kimliğini yazar.

Şeridin altındaki satır

Betik body’nin sonundadır; şerit ve paragraflar durur. Bir dinleyici kaydedilir, hands 1 olur. Önce red tıklanır, sonra blue. Her bilet kimliği seen içine gider. gold oluşturulur, eklenir ve tıklanır, gold da seen içine girer. Satır bu üçüncü tıklamadan sonra yazılır. Sayfa şeridin kendisine tıklamaz, bu yüzden skip satırda yoktur.

Sayfa demosu — bilet şeridi

html 
<!DOCTYPE html>
<html>
<head>
<title>event-delegation — page</title>
</head>
<body>
<div id="strip">
<button id="red" type="button">red</button>
<button id="blue" type="button">blue</button>
</div>
<p id="note">blank</p>
<p id="line">…</p>
<script>
let strip = document.getElementById("strip");
let note = document.getElementById("note");
let seen = [];
let hands = 0;
function take(event) {
if (event.target === event.currentTarget) {
note.textContent = "skip";
return;
}
note.textContent = event.target.id;
seen.push(event.target.id);
}
strip.addEventListener("click", take);
hands = hands + 1;
document.getElementById("red").click();
document.getElementById("blue").click();
let gold = document.createElement("button");
gold.id = "gold";
gold.type = "button";
gold.textContent = "gold";
strip.appendChild(gold);
gold.click();
document.getElementById("line").textContent =
seen.join(" / ") + " / " + hands;
</script>
</body>
</html>

Satır red / blue / gold / 1 olur. Üç kimlik, sırayla tıklanan biletlerdir. Son parça hands değeridir. addEventListener bir kez çalıştı, bu yüzden parça 1’dir, 3 değil. Fiş gold ile biter, çünkü son tıklama gold idi. blank sözcüğü gider. skip hiç görünmez. Plaket satırı ile askı satırı başka sayfalardır.
Yalnızca metin tutan bir düğme event.target değerini düğmede bırakır; id red, blue ya da gold olur. Düğmenin içine span koyarsan tıklama span’e inebilir. span’in kimliği yoktur. Bu sayfa bunu yapmaz.

Gişede

  1. Şeride bir dinleyici koy ve red’e tıkla. Fiş red olur. red’in kendi dinleyicisi yoktur.
  2. Aynı dinleyiciyle blue’ya tıkla. Fiş blue olur.
  3. gold’u oluştur, ekle ve tıkla. Fiş gold olur. Dinleyici zaten şeritteydi.
  4. Şeridin kendisine tıkla. Nöbetçiyle fiş skip olur. Sonra satırı oku: red / blue / gold / 1.

Gişede kaçan yerler

Etiketler hâlâ red, blue ve gold der. Fiş bilet sözcüğü değildir.

  • red’e bir dinleyici, blue’ya bir başkası, sonra gold’un susmasına şaşırmak
  • Bileti isterken event.currentTarget okumak
  • Şeridi isterken event.target okumak
  • Nöbetçiyi unutmak, böylece strip.click() strip yazar
  • Düğmenin içinde span, o zaman target span olur ve kimlik boş kalır
  • gold üzerinde addEventListener çağırmak, sonra hands değerini 2 saymak
  • preventDefault ya da stopPropagation çağırmak; o plaket sayfasıydı
  • İşlevin argümanının düğme öğesi olmasını beklemek
  • Satırı click / seal / plaque / true / quiet ya da wool silk / 2 / peg diye okumak
  • Üç bilet tıklandı diye son parçayı 3 okumak

Sende kalan

  • Şeritteki bir addEventListener içindeki her düğmeyi duyar
  • red tıklanınca event.target.id red, event.currentTarget.id strip olur
  • Aynı dinleyici blue tıklanınca blue yazar
  • Dinleyiciden sonra oluşan gold yine gold yazar
  • Şeridin kendisine tıklama, nöbetçiyle, skip yazar
  • Sayfa satırı red / blue / gold / 1 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

❓
8
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
Konu 52 / 52
Javascript Ders