Photo by Stefan Lehner on Unsplash

Web API

Web Events

Dnd (Drag and Drop API) anlatırken, bu yapının Event Mekanizması üzerine kurulu olmasından dolayı öncelikle Event kavramını ve işleyişini anlatmam gerektiğini anladım. Event DOM içerisinde gerçekleşen herhangi bir olayı temsil etmek için kullanılan objedir.

Kullanıcı bir düğmeye tıkladı, sürükledi, veya klavyenin tuşlarına bastığı durumlarda hangi HTML Element bağlamında ise onun ile ilgili bir Event oluşturulur. Kodunuzda bu eventleri dinleyebilmek için ilgili nesnelere kayıt olarak bu olayları(events) dinleyebilir ve buna göre gerekli kod bloklarını çalıştırabilirsiniz.

EventTarget arayüzünü(interface) türeyen tüm DOM elemanları kendilerine register olan event türlerine göre ilgili listener tetikler.

EventTarget.addEventListener()
EventTarget.removeEventListener()
EventTarget.dispatchEvent()

EventTarget gerçekleştiren Element, Document, Window, XMLHTTPRequest, AudioNode, AudioContext vb bir çok Web Objesi bulunmaktadır.

Örneğin HTMLElement, SVGElement, MathMLElement → Element nesnesinden türediği için EventTarget görevi görürler.

Element —> EventTarget

Örneğin HTMLDocument, XMLDocument, SVGDocument → Document nesnesinden türediği için EventTarget görevi görürler.

Document → EventTarget

Örneğin XMLHTTPRequest (XHR) EventTarget görevi görür.

XHR → EventTarget

Görüleceği gibi tarayıcı yani web ortamında Network, Mouse, Keyboard, Audio, Display ile iletişim için WebAPI Event mekanizmasını kullanır.

Event üreten kaynaklar ortak bir arayüz olan EventTarget implement eder. Bu kısım ortak bir mekanizma ile çalışırken ürettiği Event türleri bağlam kapsamında farklı olacaktır. Event türlerine örnek vermek gerekirse

https://developer.mozilla.org/en-US/docs/Web/Events

UI Event Mekanizması

*.onClick tüm HTMLElement genel bir listener eklediğimizde nasıl bir davranışta bulunacak. Çünkü HTML elemanları iç içe bulunan yapılardır ve Event tetikleme hangi sırada gerçekleşecektir? Burada 2 tip model bulunur.

-----------------------------------
| HTML> BODY> FORM > DIV          |
|   -------------------------     |
|   |P                      |     |
|   -------------------------     |
|                                 |
-----------------------------------

• Event Capturing: Bu yöntemde tıklanan elemana yukarıdan aşağıya doğru ulaşılır. HTML → BODY → FORM → DIV → P olarak eventleri oluşturur.
• Event Bubbling: Bu yöntemde de tıklanan elemanda aşağıdan yukarıya doğru eventler oluşturulur. P → DIV → FORM → BODY → HTML

Bu eventlerin bir sonraki seviyeye atlamamasını engellemek için event.stopPropagation() metodu kullanılır. Bu sayede sadece ilgili seviyeye kadar event ilerlemesi sağlanıp sonraki kısımlarda event işleyişi durdurulabilir. Aynı işlem önceden event.cancelBubble = true; ilede yapılabilmektedir.

Birde HTML elemanlarının sizin eklediğiniz listener dışında default davranışları kendi event işleme mekanizmaları olabilir . Örneğin.

• Submit düğmesine basıldığında form gönderimi
• Linke basıldığında ilgili URL direk gitme işlemi yapılır.

Bu davranışı önlemek için event.preventDefault() metodu kullanılır. Kendi listener içerisinde gelen eventi işledikten sonra başka aynı elemanın başka listener çağrılmasını engellemek için cancelable: true flag atanır.

Referanslar

• https://developer.mozilla.org/en-US/docs/Web/Events
• Introduction to events
• Event order
• Bubbling and capturing

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.