event nesnesi
Müze duvarında bir plaket var. Dış kutu #wall. İçinde #plaque bir bağlantı tutar, #seal. Bağlantının üstünde open yazar, href ise /wing. Duvarın altında #slip hâlâ blank der.
Tarayıcı işleve bir nesne verir. Parametrenin adı event. event.type olayın türüdür. Tıklama bu dizgiyi click yapar. event.target tıklamanın indiği öğedir. event.currentTarget bu dinleyicinin oturduğu öğedir. İkisi yalnızca tıklama ile dinleyici aynı öğedeyse birdir.
Mühür bir bağlantıdır. preventDefault /wing adresine gidişi keser. Çağrıdan sonra event.defaultPrevented true olur. Çağırmazsan bayrak false kalır. Tıklama sonra dışarı yürür: mühür, plaket, duvar. Plaket üzerindeki stopPropagation bu yolu keser, duvarın dinleyicisi çalışmaz.
Sayfanın betiği mühre bir kez tıklar. Plaketin altındaki satır şudur: click / seal / plaque / true / quiet. Burada onclick yazılmaz, removeEventListener çağrılmaz ve öğe üretilmez.
Tarayıcının verdiği nesne
Önceki sayfa askılıktı. wool ve silk parametre almıyordu, bu nesneyi okuyamıyordu. Satırları wool silk / 2 / peg idi. Zil sayfası onclick doldurur ve this okurdu. Bu sayfa okumaz. getElementById yalnızca duvarı, plaketi, mühürü ve fişi verir.
addEventListener hâlâ işlevi yalnızca saklar. Nesne, tıklama işlevi çalıştırınca gelir, eklerken değil. currentTarget değerini işlevin içinde oku. İşlev dönünce bu özellik null olur.
Bir tıklama ne söyler
Fiş blank ile başlar. Bağlantı metni open kalır. Satırları sırayla oku. Her parça taze duvardan başlar, sayfa satırı hariç: o alttaki demodur. O demo removeEventListener çağırmaz.
📊 Bir tıklama ne söyler
| An | Ne okursun | Fiş metni | Kolay karışma |
|---|---|---|---|
dinleyici mühürde, seal.click(), türü okumak |
event.type |
click | kimliği tür sanmak |
| dinleyici plakette, mühre tıklamak, target | event.target.id |
seal | currentTarget okumak |
| aynı tıklama, currentTarget | event.currentTarget.id |
plaque | target okumak |
mühürde preventDefault, sonra bayrak |
event.defaultPrevented |
true | bağlantı hâlâ gider sanmak |
preventDefault yok |
event.defaultPrevented |
false | her dinleyici bağlantıyı keser sanmak |
plakette stopPropagation, duvar da dinler |
marks birleşimi | plaque | plaque wall beklemek |
sayfa betiği, bir click |
satır | click / seal / plaque / true / quiet | satırın wall ile bitmesi |
Mühre tıklama tek bir nesnedir. Yoldaki her dinleyici onu görür. type değişmez. target değişmez. currentTarget değişir: o anda çalışan dinleyicinin öğesidir.
preventDefault tarayıcının varsayılan işiyle konuşur. Bu bağlantıda o iş /wing adresine gitmektir. Çağrı dinleyiciyi listeden çıkarmaz. stopPropagation yolla konuşur. Bağlantıyı kesmez. Birini çağırmak diğerini çağırmak değildir.
join(" ") yalnızca marks içinde duran sözcüklerin arasına boşluk koyar. Burada boş liste birleştirilmez. Fiş blank sözcüğüyle başlar ve yalnızca bir dinleyicinin içinde ya da tıklamadan sonra sayfa betiğinde değişir.
Tür
Dinleyici mühürdedir. İşlev parametreye event der ve event.type değerini fişe yazar. Sonra seal.click() çalışır.
let seal = document.getElementById("seal");
let slip = document.getElementById("slip");
function readType(event) {
slip.textContent = event.type;
}
seal.addEventListener("click", readType);
seal.click();
console.log(slip.textContent);
Çıktı click olur. Tür olayın cinsidir, kimlik değildir, open sözcüğü de değildir.
Tıklamanın indiği öğe
Taze duvar. Dinleyici plakettedir, mühürde değil. Tıklama yine mühre iner. event.target o öğedir, bu yüzden event.target.id seal olur.
let plaque = document.getElementById("plaque");
let seal = document.getElementById("seal");
let slip = document.getElementById("slip");
function readTarget(event) {
slip.textContent = event.target.id;
}
plaque.addEventListener("click", readTarget);
seal.click();
console.log(slip.textContent);
Çıktı seal olur. Dinleyicinin öğesi plakettir. target plaketi söylemez. Tıklamanın altındaki öğeyi söyler.
Dinleyici nerede oturur
Aynı taze duvar, dinleyici hâlâ plakette, tıklama hâlâ mühürde. Fiş iki kimliği yazar: önce target, sonra currentTarget.
let plaque = document.getElementById("plaque");
let seal = document.getElementById("seal");
let slip = document.getElementById("slip");
function readWhere(event) {
slip.textContent = event.target.id + " " + event.currentTarget.id;
}
plaque.addEventListener("click", readWhere);
seal.click();
console.log(slip.textContent);
Çıktı seal plaque olur. İlk sözcük tıklamadır. İkincisi bu dinleyicinin oturduğu öğedir. Dinleyiciyi mühre koyup mühre tıklarsan iki kimlik de seal olur, çünkü tıklama ile dinleyici aynı öğeyi paylaşır. Bu okuma plakettendir, kimlikler ayrılır. currentTarget değerini işlevin içinde oku. Dönüşten sonra null olur.
Bağlantıyı kesmek
Mührün href değeri /wing. Bu tıklamanın varsayılan işi bağlantıyı izlemektir. preventDefault o işi keser. Dinleyiciyi çıkarmaz. Çağrının hemen ardından event.defaultPrevented true olur.
let seal = document.getElementById("seal");
let slip = document.getElementById("slip");
function hold(event) {
event.preventDefault();
slip.textContent = String(event.defaultPrevented);
}
seal.addEventListener("click", hold);
seal.click();
console.log(slip.textContent);
Çıktı true olur. preventDefault olmazsa aynı okuma false olur. Fiş false der ve bağlantının varsayılan işi yerinde kalır. stopPropagation bu bayrağı koymaz.
Tıklama dışarı yürür
Mühür plaketin içinde, plaket duvarın içinde. Mühre tıklama önce plaket dinleyicisine, sonra duvar dinleyicisine varır, yol kesilmediyse. Plaket üzerindeki stopPropagation yolu keser. Duvar işlevi çalışmaz. preventDefault yolu kesmez.
let wall = document.getElementById("wall");
let plaque = document.getElementById("plaque");
let seal = document.getElementById("seal");
let slip = document.getElementById("slip");
let marks = [];
function onPlaque(event) {
marks.push("plaque");
event.stopPropagation();
}
function onWall() {
marks.push("wall");
}
plaque.addEventListener("click", onPlaque);
wall.addEventListener("click", onWall);
seal.click();
slip.textContent = marks.join(" ");
console.log(slip.textContent);
Çıktı plaque olur. wall sözcüğü marks içine girmez. stopPropagation olmasa aynı tıklama plaque wall yazardı. Alttaki demo hem yolu keser hem bağlantıyı keser.
Plaketin altında bir satır
Betik body sonunda durur, duvar ve paragraflar varken. Mührün dinleyicisi preventDefault çağırır. Plaketin dinleyicisi stopPropagation çağırır, sonra türü, target kimliğini, currentTarget kimliğini ve bayrağı saklar. Duvarın dinleyicisi heard değerini wall yapardı, ama yol çoktan kesilmiştir, bu yüzden heard quiet kalır. Satır seal.click() sonrasında yazılır, duvar sırasını aldıktan sonra.
<!DOCTYPE html>
<html>
<head>
<title>event-object — page</title>
</head>
<body>
<div id="wall">
<div id="plaque">
<a id="seal" href="/wing">open</a>
</div>
</div>
<p id="slip">blank</p>
<p id="line">…</p>
<script>
let wall = document.getElementById("wall");
let plaque = document.getElementById("plaque");
let seal = document.getElementById("seal");
let slip = document.getElementById("slip");
let kind = "";
let from = "";
let on = "";
let held = "";
let heard = "quiet";
seal.addEventListener("click", function (event) {
event.preventDefault();
});
plaque.addEventListener("click", function (event) {
event.stopPropagation();
kind = event.type;
from = event.target.id;
on = event.currentTarget.id;
held = String(event.defaultPrevented);
});
wall.addEventListener("click", function () {
heard = "wall";
});
seal.click();
slip.textContent = kind + " " + from + " " + on;
document.getElementById("line").textContent =
kind + " / " + from + " / " + on + " / " + held + " / " + heard;
</script>
</body>
</html>
Satır click / seal / plaque / true / quiet olur. Tür click. target kimliği seal. currentTarget kimliği plaque, çünkü o dinleyici plakette. Bayrak true, çünkü mührün dinleyicisi preventDefault çağrısını plaket okumadan önce yaptı. Son sözcük quiet, wall değil, çünkü stopPropagation plakette çalıştı. open metni satırda yok. Fiş click seal plaque olur. Sonraki sayfa olay delegasyonu. Mühür işaretlemede zaten var. Burada dinleyiciden sonra yeni bir çocuk eklenmez.
Plakette beş kontrol
- Dinleyiciyi mühre koy ve tıkla. Fiş click olur.
- Dinleyiciyi plakete koy, mühre tıkla,
event.target.idoku. Fiş seal olur. - Aynı dinleyici iki kimliği yazar. Fiş seal plaque olur. Mührün kendisindeki dinleyici seal seal yazardı.
preventDefaultçağır, sonraevent.defaultPreventedoku. Fiş true olur. Çağrı yoksa false.- Plakette
stopPropagationçağır, duvar da dinlesin. marks plaque diye birleşir. Satırı oku: click / seal / plaque / true / quiet.
Bu plaket nerede yanıltır
Bağlantı hâlâ open der. Fiş, bağlantı metni değildir.
- İşlev argümanının mühür öğesi olmasını beklemek, olay nesnesi değil
- Dinleyicinin öğesini isterken
event.targetokumak - Tıklamanın altındaki öğeyi isterken
event.currentTargetokumak preventDefaultçağrısının dinleyiciyi çıkarmasını beklemek, askıdakiremoveEventListenergibistopPropagationçağrısının/winggidişini kesmesini beklemek- Plakette
stopPropagationolduktan sonra duvar dinleyicisinin çalışmasını beklemek - İşlev döndükten sonra
event.currentTargetokuyup plaque beklemek onclickyazmak ya dathisvetypeof nullokumak; o zil sayfasıydı- Bağlantıyı
createElementile kurmak; o daha eski bir sayfaydı - Satırı wall ile bitmiş okumak ya da wool silk / 2 / peg sanmak
Akılda kalan
- Tıklamadan sonra
event.typeclick olur - Dinleyici plakette, tıklama mühürde:
event.target.idseal olur - Aynı tıklamada
event.currentTarget.idplaque olur - Dinleyici mühürdeyse target ve currentTarget ikisi de seal olur
preventDefaultevent.defaultPreventeddeğerini true yapar, çağrı yoksa false kalır- Plaketteki
stopPropagationduvar dinleyicisini çalıştırmaz - Sayfa satırı click / seal / plaque / true / quiet olur
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 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