JavaScript Notları III-Events
Bu sefer Javascript’in tarayıcı ile olan ilişkisine ve “Event” lere göz atıyoruz:
55 — Event’ler nelerdir?
Event’ler, programlama yaptığımız sistemde meydana gelen ve bir şekilde cevap verebildiğimiz hareketler ya da oluşumlardır. Event’ler event handler olarak bildiğimiz bir fonksiyon tarafından iadere edilir.
56 — Js’teki farklı event’ler hangileridir?
Girdi (Input) Eventleri
•onsubmit — bir formu onaylarken harekete geçer.
•onselect — bir elemanı seçerken harekete geçer.
•onchange — bir elemana değişiklik yapıldığında harekete geçer.
•onfocus — pencere odağa geldiğinde harekete geçer.
•onreset — kullanıcı reset tuşuna tıkladığında harekete geçer.
•onblur — pencere odağını kaybettiğinde harekete geçer.
•onkeyup — bir tuş bırakıldığında harekete geçer.
•onkeydown — bir tuşa basıldığında harekete geçer.
Tıklama (Click) Event’leri
•onclick — bir fare düğmesine tıklandığında harekete geçer.
•ondblclick — fare düğmesine çift tıklandığında harekete geçer.
Fare (Mouse) Event’leri
•ondrag — bir eleman sürüklendiğinde harekete geçer.
•ondragend — sürükleme bittiğinde harekete geçer.
•ondragstart — sürükleme başladığında harekete geçer.
•ondragenter — sürüklenen eleman bırakıldığında harekete geçer.
•ondragleave — elemanı sürüklerken hedef bırakıldığında harekete geçer.
•onmouseover — fare imleci bir eleman üzerine geldiğinde harekete geçer.
•onmousedown — fare düğmesine basılınca harekete geçer.
•onmouseup — fare düğmesi bırakılınca harekete geçer.
•onscroll - bir elemanın kaydırma çubuğuna gelince harekete geçer.
Yükleme (Load) Event’leri
•onload- sayfa yüklendiğinde harekete geçer.
•onerror- bir resim yüklenirken hata oluştuğunda harekete geçer.
•onunload- tarayıcı dokümanı kapadığında harekete geçer.
57 — “Event handlers” nedir?
Event handler (olay denetimci), event’ler ile ilgilenen ve programcının, olay oluştuğu zaman çalıştırılmak üzere, kod yazmasına olanak sağlayan bir rutindir.
58 — “addEventListener()” metodu nedir?
addEventListener() metodu event handler’ı belirli bir elemana bağlar.
Bir elemana birden çok event handler ekleyebilirsiniz. Herhangi bir DOM projesine event listener eklemekte mümkündür.
ör:
document.getElementById(“someUniqueDivId”).addEventListener(“click”, respondtoclick);function respondtoclick() {console.log(“Do some stuff!!!”);}
59 — “addEventListener()” nasıl kaldırabiliriz?
removeEventListener() Js’te hazır bulunan bir fonksiyondur. Bir elemandan event handler’ı kaldırmak için kullanılır.
ör:
document.getElementById(“someUniqueDivId”).removeEventListener(“click”, respondtoclick);60 — Farklı anahtar kodları nelerdir? (key codes)
Tuşlarla ilgili olan kodlardır. Bir tuşa basıldığında hangi unicode karakterin döneceğini gösterir.
Ör:
http://javascriptkeycode.com/
https://www.w3schools.com/jsref/event_key_keycode.asp
61 — Event bubbling nedir?
Bir elemanda bir event gerçekleştiğinde, öncelikle o elemandaki handler çalıştırılır. Sonra bir üst seviyedeki (parent) handler çalıştırılır ve bu durum en üst seviyeye (ancestors) kadar devam eder.
Alt öğelerden üst öğelere (from child to parent) doğru oluşan bu duruma bubbling denir.
Aşağıdaki şekilde olduğu gibi <p>’ye tıklanıldığında önce <p>’de, sonra dışarıdaki <div>’de daha sonra <form>’da çalıştırılır ve bu durum doküman objesine kadar devam eder.
62 — Event bubbling’i durdurmak mümkün müdür?
Evet, event.stopPropagation() metodu ile mümkündür.
DOM içerisinde, olay hedefinden (event target) en üst elemana kadar olan olay akışını (event flow) durdurmak istiyorsanız bu metodu kullanabilirsiniz. Bu metot, event’in en alttan en üste kadar olan dolaşımını durdurur.
63 — Event capturing nedir?
Capturing aşamasında tarayıcı, elemanın en dışta bulunan öğesine (outer-most ancestor <html>) kayıtlanmış (onclick) bir event olup olmadığını kontrol eder. Kayıtlı ise onu çalıştırır.
Sonra <html> içerisinde bulunan diğer elemana geçer ve aynı işlemi tekrar eder. Bu şekilde asıl tıklanan elamana varana dek devam eder. Capturing işlemi sık kullanılmaz ve arka planda çalıştığı için bize görünmez.
64 — Event delegation nedir?
Event delegation konsepti birçok alt elemandan oluşan bir grup için kodun çalışmasını istediğimizde işimize yarar. Event listener’ı her bir alt öğe (child) için tek tek ayarlamak yerine, onların üst (parent) elemanına ayarlayıp, herhangi birine tıklandığında üst öğeye doğru erişmesine (bubbling) olanak sağlamış oluruz.
Buna güzel bir örnek list items <li> tag’idir. Eğer listedeki herbir elemana tıklandığında bir mesaj çıkarmasını istiyorsak, Click event listener’i bir üst öğe olan <ul> ile ayarlayabiliriz.
Ek kaynaklar:
