DOM Olay Modeli, doküman üzerinde window nesnesinden en alt elemente kadar gerçekleşebilecek bir çok olayın tanımlanmasını, dinlenmesini ve ilgili verilerin organizasyonunu sağlar. Event nesnesi ise olay modelinde bu verilerin tutulmasını ve olay yönetimi ile ilgili birkaç metod sağlar.
Terimler ve Olay Akışı
- Yakalama (Capturing) : Olay'ın hedef elemente ulaşmadan önce elementin üst elementlerinden biri tarafından tutulması işlemi
- Dönüş (Bubbling/Event Bubble-ing) : Olay'ın hedef elementi tarafından tutulduktan sonra üst elementleri izleyerek kök elemente dönüş işlemi
- Vazgeçilebilirlik (Cancelable) : Olayı gerçekleşmemiş gibi gösterme veya Olayı durdurma işlemi.
- Olay Dinleyici (Event Listener) : Olay tetiklendiği zaman Event nesnesinin de değerleri ile birlikte aktarıldığı, çalıştırılacak metod. addEventListener veya Microsoft DHTML'de attachEvent metodu kullanılarak kaydedilebilir.
Internet Explorer'da window.event nesnesi statik olduğu için herhangi bir olay dinleyici fonksiyona parametre olarak aktarılmasına gerek yoktur.
DOM Olay Modelinde her Olay'ın ulaşacağı, olayın gerçekleştiği bir hedef element vardır. Olay, Kök'ten hedef elemente kadar gidip-gelerek olay akışını tamamlar. Bu olay akışı sırasında hedef element ile birlikte hem gidişte hem dönüşte yol üzerindeki elementlerde de Olay dinleyicisi kayıtlıysa bu dinleyiciler de tetiklenerek ilgili fonksiyonlar çağrılır.
Olay gerçekleştiğinde, Yakalama veya Dönüş için akış yolu üzerindeki elementlerde bir Olay dinleyisi kayıtlı olmasa bile Olay, hedef elemente kadar gidip-gelerek akışını tamamlar. Bununla birlikte, olay akışı devam ederken herhangi bir Olay dinleyici fonksiyonunun içinde istisnai durum fırlatılması olay akışını kesmez. Olay, yolu üzerindeki bütün dinleyicileri tetiklemeye devam ederek akışını tamamlar. Olay akışının durdurulması istendiğin de eğer vazgeçirilebilir bir olay ise bu, event.cancelBubble özelliği veya stopPropagation() metodu ile yapılabilir.
Event nesnesinin özellikleri ve metodları aşağıda gösterilmektedir.
Özellikler
| Özellik | Açıklama |
|---|
|
altKey | Klavyede ALT tuşuna basılıp-basılmadığını verir. |
|
ctrlKey | Klavyede CTRL tuşuna basılıp-basılmadığını verir. |
|
shiftKey | Klavyede SHIFT tuşuna basılıp-basılmadığını verir. |
|
button | Basılan fare tuşunun tamsayı değerini verir. |
|
cancelBubble | Olay'ın kök'e dönüşünü durdurur. |
|
charCode | keypress olayında, klavyeden basılan tuşun unicode değerini verir. |
|
keyCode | Klavyeden basılan normal veya özel bir tuşun unicode değerini verir. |
|
which | Klavyeden basılan herhangi bir tuşun unicode değerini verir. |
|
currentTarget | İçinde bulunduğu Olay dinleyicisinin kayıtlı olduğu elementin referansını verir. |
|
eventPhase | Olay akışı sırasındaki aktif evrenin sabit tamsayı değerini verir. |
|
target | Olay'ın yönlendirildiği hedef elementin referansını verir. |
|
type | Gerçekleşen Olay'ın adını başındaki 'on' ön eki olmadan verir. |
|
view | HTML DOM'da window nesnesini döndürür. |
|
clientX | İçerik alanında fare işaretçisinin soldan olan uzaklığını verir. |
|
clientY | İçerik alanında fare işaretçisinin üstten olan uzaklığını verir. |
|
x | İçerik alanında fare işaretçisinin soldan olan uzaklığını verir. |
|
y | İçerik alanında fare işaretçisinin üstten olan uzaklığını verir. |
|
layerX | Fare olayının gerçekleştiği katman içindeki fare işaretçisinin, soldan uzaklığını verir. |
|
layerY | Fare olayının gerçekleştiği katman içindeki fare işaretçisinin, üstten uzaklığını verir. |
|
offsetX | Fare olayının gerçekleştiği katman içindeki fare işaretçisinin, soldan uzaklığını verir. |
|
offsetY | Fare olayının gerçekleştiği katman içindeki fare işaretçisinin, üstten uzaklığını verir. |
|
pageX | Doküman üzerinde fare işaretçisinin soldan uzaklığını verir. |
|
pageY | Doküman üzerinde fare işaretçisinin üstten uzaklığını verir. |
|
screenX | Sistem ekranı üzerinde fare işaretçisinin soldan uzaklığını verir. |
|
screenY | Sistem ekranı üzerinde fare işaretçisinin üstten uzaklığını verir. |
Metodlar
| Metod | Açıklama |
|---|
|
initEvent() | createEvent() metodu ile oluşturulan bir Olay'ın ilk değerlerinin verilmesini sağlar. |
|
initKeyEvent() | createEvent("KeyboardEvent") metodu ile oluşturulan bir Klavye Olay'ının ilk değerlerinin verilmesini sağlar. |
|
initMouseEvent() | createEvent("MouseEvents") metodu ile oluşturulan bir Fare Olay'ının ilk değerlerinin verilmesini sağlar. |
|
preventDefault() | Engellenebilen bir Olayın ilgili element ve olay tipi için engellenmesini sağlar. |
|
stopPropagation() | Olay akışının durdurulmasını sağlar. |