Yükleniyor...

JavaScript olayları

Dairenin kapısında bir zil var. Düğme #bell, üzerinde press yazıyor. Altında #chime hâlâ silent diyor. HTML’de onclick özniteliği yok, bu yüzden bell.onclick baştan null.
Eski bir tuzak: JavaScript’te typeof null değeri "object" olur. Yani typeof bell.onclick de "object"; ne "null" ne "undefined". Karşılaştırma bell.onclick === null doğrudur.
onclick içine işlev koymak zili o anda çalmaz. Metin, bell.click() yuvadaki işlevi çalıştırana kadar silent kalır. Yuvada tek işlev durur. İkincisini yazarsan birincisi gider. Bir tıklama ikisini birden çalıştırmaz. addEventListener sonraki sayfa; orada dinleyiciler üst üste biner. Bu sayfa onu çağırmaz.
bell.onclick = null yuvayı boşaltır. Ondan sonraki tıklama metne dokunmaz. İşlevin içinde this düğmenin kendisidir, bu yüzden this.id bell olur. Düğmedeki sözcük press kalır. Sayfanın betiği bir kez click çağırır. Zilin altındaki satır dong / 1 / bell olur. Burada öğe oluşturulmaz ve CSS özelliği yazılmaz.

Düğmede tek yuva

Önceki sayfa createElement ile li düğümleri kurup append, prepend ve insertBefore ile yerleştiriyordu. Burada düğüm kurulmaz ve children okunmaz. Ondan önceki sayfa boya örneğine style ve classList yazmıştı. Burada style atanmaz. getElementById yalnızca düğmeyi ve paragrafı verir. Yeni olan onclick özelliğidir: bir işlev ya da null.

Yuvada ne durur

Düğme press ile başlar, altında silent vardır. Satırları sırayla oku. Her parça bu taze düğmeden başlar; sayfa satırı hariç, o alttaki demodur. Demo null atamaz.

📊 Yuvada ne durur

An onclick ne tutar Zil metni Kolay karışan
hiç atama yokken null; typeof "object" silent typeof değerini "null" okumak
ding işlevinden sonra, click öncesi bir işlev silent atamanın kendisinin çaldığını sanmak
ding ile click sonrası o işlev ding düğme metninin ding olması
dong, ding’in yerine geçer, sonra bir click dong işlevi, ding değil dong iki işlevin birden çalışması
onclick = null, sonra click, taze düğme null; typeof "object" silent boş yuvanın hâlâ çalması
sayfa betiği, bir click bir işlev; this.id bell dong satırın silent ile bitmesi

onclick öğenin özelliğidir. İşleyici yoksa değer null olur ve typeof null yine "object" kalır. Yuvanın boş olduğunu görmek için === null kullan. Atama işlevi saklar. Çağırmaz. bell.click() bir tıklama gönderir ve o anda yuvadaki işlevi çalıştırır. Düğmenin kendi metni değişmez. İkinci atama özelliğin üzerine yazar. Birinci işleve ad verdiysen nesne bellekte durur, ama özellik artık ona bakmaz. onclick = null işleyiciyi kaldırır. HTML onclick özniteliği de aynı yuvayı doldururdu; bu düğmede o öznitelik yok. Ok işlevi bu yuvada this değerini düğme yapmaz. Bu sayfa düz function kullanır.

Yuva başta boş

Dosya düğme ve paragrafla açılır. Henüz bir şey atanmadı. Bu dört çıktı özelliği, onun typeof değerini, zil metnini ve düğmedeki sözcüğü sorar.

Sessiz zil

javascript 
let bell = document.getElementById("bell");
let chime = document.getElementById("chime");
console.log(bell.onclick);
console.log(typeof bell.onclick);
console.log(chime.textContent);
console.log(bell.textContent);

Çıktılar: null, object, silent ve press. Yuva boş. typeof null sözcüğünü basmaz. Düğme ve paragraf hâlâ işaretlemedeki sözcükleri gösterir.

İşlev bekler

onclick = function ... işlevi saklar. Gövde o satırda çalışmaz. Zil hâlâ silent ve özellik artık null değil.

Ata, çalma

javascript 
let bell = document.getElementById("bell");
let chime = document.getElementById("chime");
bell.onclick = function () {
chime.textContent = "ding";
};
console.log(typeof bell.onclick);
console.log(chime.textContent);
console.log(bell.onclick === null);

Çıktılar: function, silent ve false. Yuvada bir işlev görürsün. Paragraf değişmedi, çünkü işlevi kimse çağırmadı.

click yuvadakini çalıştırır

bell.click() şu anki işleyiciyi çalıştırır. Zil ding olur. Düğme metni press kalır. Tıklamadan sonra yuvada hâlâ bir işlev vardır.

Bir kez tıkla

javascript 
let bell = document.getElementById("bell");
let chime = document.getElementById("chime");
bell.onclick = function () {
chime.textContent = "ding";
};
bell.click();
console.log(chime.textContent);
console.log(bell.textContent);
console.log(typeof bell.onclick);

Çıktılar: ding, press ve function. Bir tıklama, bir değişiklik, ve değişiklik paragraftadır. press sözcüğü hâlâ düğmededir.

İkinci işlev birincinin yerine geçer

Bu parça yine taze düğmeden başlar. Önce ding saklanır, sonra üzerine dong yazılır, ancak ondan sonra bir click gelir. İki atama arasında tıklama yoktur, bu yüzden bu çalıştırmada zil hiç ding olmaz. Tıklamadan sonra dong olur. bell.onclick === ding false olur. bell.onclick === dong true olur.

İkinci kalır

javascript 
let bell = document.getElementById("bell");
let chime = document.getElementById("chime");
function ding() {
chime.textContent = "ding";
}
function dong() {
chime.textContent = "dong";
}
bell.onclick = ding;
bell.onclick = dong;
bell.click();
console.log(bell.onclick === ding);
console.log(bell.onclick === dong);
console.log(chime.textContent);

Çıktılar: false, true ve dong. ding adı hâlâ bir işleve bakar. Özellik bakmaz. Bir tıklama yalnızca dong çalıştırdı.

null yuvayı boşaltır

Bunu taze düğmede çalıştır. Bir işlev atanır ve herhangi bir tıklamadan önce silinir. null sonrası bell.click() dong yazmaz. Zil silent kalır. Değer null olduğu için typeof yine object olur.

Yuvayı boşalt

javascript 
let bell = document.getElementById("bell");
let chime = document.getElementById("chime");
bell.onclick = function () {
chime.textContent = "dong";
};
bell.onclick = null;
bell.click();
console.log(bell.onclick);
console.log(typeof bell.onclick);
console.log(chime.textContent);

Çıktılar: null, object ve silent. dong yazacak işlev, tıklama anında yuvada değildir. Aşağıdaki sayfa demosu yuvayı boşaltmaz.

Zilin altında bir satır

Betik body sonunda, düğme ve paragraftan sonra durur. Bir işlev saklar ve bir kez click çağırır. İşlevin içinde taps 0’dan 1’e çıkar, zil dong olur ve this.id bell.dataset.who içine yazılır. Satır, zil metnini, sayıyı ve o id’yi birleştirir. Düğme metnini yazmaz.

Sayfa demosu — kapı zili

html 
<!DOCTYPE html>
<html>
<head>
<title>events — page</title>
</head>
<body>
<button id="bell" type="button">press</button>
<p id="chime">silent</p>
<p id="line">…</p>
<script>
let bell = document.getElementById("bell");
let chime = document.getElementById("chime");
let taps = 0;
bell.onclick = function () {
taps = taps + 1;
chime.textContent = "dong";
bell.dataset.who = this.id;
};
bell.click();
document.getElementById("line").textContent =
chime.textContent + " / " + taps + " / " + bell.dataset.who;
</script>
</body>
</html>

Satır dong / 1 / bell olur. Zil dong’dur, silent değil. Sayı 1’dir, çünkü betik bir kez tıklar. Son parça, işleyicinin içindeki this üzerinden düğmenin id’sidir, press sözcüğü değil. Düğmede hâlâ press yazar. Sonraki sayfa olay dinleyicileri hakkındadır. Ana aracı bu tek onclick yuvası değildir.

Beş kontrol

  1. onclick, typeof bell.onclick, zil metni ve düğme metnini oku. Değerler: null, object, silent ve press.
  2. ding işlevini ata ve tıklama. typeof function olur, zil silent kalır ve onclick === null false olur.
  3. O ding işleviyle bell.click() çağır. Zil ding, düğme press, typeof function olur.
  4. Önce ding, sonra dong, sonra bir tıklama. onclick === ding false, onclick === dong true, zil dong olur.
  5. Taze düğmede bir işlev ata, onclick değerini null yap, sonra tıkla. Değerler: null, object ve silent. Sayfa satırı: dong / 1 / bell.

Bu zil nerede yanıltır

Düğmede hâlâ press yazar. Yuvada yanlış işlev vardı ya da yuva boştu.

  • Değer null iken typeof bell.onclick sonucunu "null" okumak
  • Atamanın kendisinin zili ding yapmasını beklemek
  • İkinci atamadan sonra bir tıklamada hem ding hem dong çalışsın diye beklemek
  • Düğme metninin ding olmasını beklemek
  • onclick = null olduktan sonra click hâlâ zili değiştirsin diye beklemek
  • Ok işlevi kullanıp this.id değerinin bell olmasını beklemek
  • Burada event.target okumak; bu işlevlerin bağımsız değişkeni yok, olay nesnesi sonraki sayfalarda
  • Burada addEventListener çağırmak; sonraki sayfa dinleyicileri üst üste koyar
  • Düğmeyi createElement ile kurmak; o iş önceki sayfadaydı
  • Satırı silent / 0 / press diye okumak

Yanında kalsın

  • İşleyici yokken bell.onclick null, typeof bell.onclick object olur
  • İşlev atamak, zili click gelene kadar silent bırakır
  • ding işleviyle bell.click() zili ding yapar ve düğmeyi press bırakır
  • İkinci atama birincinin yerine geçer, bu yüzden bir tıklama yalnızca dong çalıştırır
  • Taze düğmede onclick = null sonrası click, zili silent bırakır
  • Sayfa satırı dong / 1 / bell olur ve işleyicinin içindeki this.id bell 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 49 / 52
Javascript Ders