HTML DOM Olaylar
HTML DOM olayları JavaScript HTML belgesindeki elemanlarında farklı olay işleyicileri kayıt için izin verir.
Olaylar, normal fonksiyonları ile kombinasyon halinde kullanılır ve olay ortaya çıkmadan önce fonksiyonu icra edilmez (such as when a user clicks a button) .
Tip: olay modelinin DOM Düzey 2'de W3C tarafından standardize edilmiştir.
HTML DOM Olaylar
DOM: hangi DOM Düzey özelliği tanıtıldı gösterir.
Fare Olaylar
| Olay | Açıklama | DOM |
|---|
| tıklamada | Kullanıcı bir öğesini tıkladığında olay meydana | 2 |
| oncontextmenu | Bir öğeyi kullanıcı farenin sağ bir bağlam menüsünü açmak için zaman olay meydana | 3 |
| OnDblClick | Etkinlik bir eleman üzerinde kullanıcı çift tıklama oluşur | 2 |
| onmousedown | kullanıcı bir öğenin üzerine fare düğmesine bastığında olay meydana | 2 |
| OnMouseEnter | gösterici bir eleman üzerine taşınır, olay meydana gelir | 2 |
| OnMouseLeave | gösterici bir elemanın üzerinden taşındığında olay meydana | 2 |
| onmousemove | Olay bir eleman üzerinde iken işaretçi hareket oluşur | 2 |
| onmouseover | İşaretçi bir eleman üzerine veya alt birinin üzerine hareket ettirildiği zaman olayı oluşur | 2 |
| onmouseout | Bir kullanıcı veya alt birinin üzerinden bir eleman üzerinden fareyi hareket ettirdiğinde olay meydana | 2 |
| onmouseup | Bir kullanıcı bir öğenin üzerine bir fare düğmesini serbest bıraktığında olay meydana | 2 |
Klavye Olaylar
| Olay | Açıklama | DOM |
|---|
| onkeydown | Kullanıcı bir tuşa basarak zaman olay gerçekleşir | 2 |
| onkeypress | Kullanıcı bir tuşa bastığında olay meydana | 2 |
| onkeyup | Kullanıcı bir tuşu bıraktığında olay meydana | 2 |
Çerçeve / Nesne Olayları
| Olay | Açıklama | DOM |
|---|
| onabort | Bir kaynağın yükleme iptal edildi olayı oluşur | 2 |
| onbeforeunload | Belge yüksüz üzeredir önce olay meydana | 2 |
| onerror | Harici bir dosya yüklenirken bir hata meydana geldiğinde olay meydana | 2 |
| onhashchange | Bir URL çapa kısmına değişiklikler olmuştur olayı oluşur | 3 |
| onload | bir amacı yüklendiğinde olay meydana | 2 |
| onpageshow | Kullanıcı bir web sayfasına gittiğinde olayı oluşur | 3 |
| onpagehide | Kullanıcı bir web sayfasından uzağa gittiğinde olay meydana | 3 |
| onresize | Belge görünümü yeniden boyutlandırıldığında olay meydana | 2 |
| onscroll | Bir elemanın kaydırma çubuğu kaydırılan edilirken olay meydana | 2 |
| onunload | Bir sayfa yüksüz sonra olay meydana (için <body>) | 2 |
Form Olayları
| Olay | Açıklama | DOM |
|---|
| Bulanık | Bir öğe odağı kaybettiğinde olay meydana | 2 |
| Onchange | Bir kalıp elemanının seçimi, ya da kontrol durum içeriği değişti olay meydana gelir (for <input>, <keygen>, <select>, and <textarea>) | 2 |
| onfocus | Bir öğe odağı aldığında olay meydana | 2 |
| onfocusin | Bir öğe odağı almak üzereyken olay meydana | 2 |
| onfocusout | Bir öğe odağı kaybetmek üzereyken olay meydana | 2 |
| oninput | bir elemanın, kullanıcı girdisini alır olay meydana | 3 |
| oninvalid | Bir öğe geçersiz olduğunda olay meydana | 3 |
| onreset | Bir form sıfırlandığında olay meydana | 2 |
| onsearch | kullanıcı arama alanına bir şey yazdığında olay meydana (için <input = "search">) | 3 |
| onSelect | Kullanıcı bazı metinler seçer sonra olay meydana (for <input> and <textarea>) | 2 |
| onsubmit | Bir form gönderildiğinde olay meydana | 2 |
Drag Olaylar
| Olay | Açıklama | DOM |
|---|
| ondrag | Bir öğe sürüklenirken olay meydana gelir | 3 |
| ondragend | Kullanıcı bir eleman sürükleyerek tamamladığında olay meydana | 3 |
| OnDragEnter | sürüklenen eleman bırakma hedefi girdiğinde olay meydana | 3 |
| ondragleave | sürüklenen eleman bırakma hedefi ayrıldığında olay meydana | 3 |
| OnDragOver | sürüklenen eleman bırakma hedefinin üzerinde olduğunda olay meydana | 3 |
| ondragstart | Kullanıcı bir eleman sürüklemeye başladığında olay meydana | 3 |
| ondrop | sürüklenen eleman damla hedefe bırakıldığında zaman olay gerçekleşir | 3 |
Pano Etkinlikleri
| Olay | Açıklama | DOM |
|---|
| oncopy | Olay bir elementin kullanıcı kopyaları içeriğini ortaya çıkar | |
| oncut | kullanıcı bir öğenin içeriğini keser olayı oluşur | |
| onpaste | Kullanıcı bir elemanda bazı içerikler yapıştırır olayı oluşur | |
Baskı Olaylar
| Olay | Açıklama | DOM |
|---|
| onafterprint | Olay bir sayfa baskı başlamıştır veya yazdırma diyalog kutusu kapalı olup olmadığını oluşur | 3 |
| OnBeforePrint | Bir sayfa basılacak üzereyken olay meydana | 3 |
Medya Etkinlikleri
| Olay | Açıklama | DOM |
|---|
| onabort | Bir medya yükleme iptal edildi olay meydana | 3 |
| oncanplay | (Bu başlamak için yeterli miktarda arabelleğe olduğunda) tarayıcı medyayı oynamaya başlayabilirsiniz olayı oluşur | 3 |
| oncanplaythrough | tarayıcı arabelleklemede durmadan medya aracılığıyla çalabilir olayı oluşur | 3 |
| ondurationchange | medyanın süresi değiştiğinde olay meydana | 3 |
| onemptied | Kötü bir şey ve ortam dosyası aniden kullanılamaz olayı oluşur (like unexpectedly disconnects) | 3 |
| onended | Medya sonuna ulaşmak olduğunda olay meydana (useful for messages like "thanks for listening") | 3 |
| onerror | bir hata ortam dosyasının yükleme sırasında meydana gelen olay meydana gelir | 3 |
| onloadeddata | medya veri dolu olduğu zaman olay meydana | 3 |
| onloadedmetadata | Meta veri olay meydana gelir (like dimensions and duration) yüklü olan | 3 |
| onloadstart | arayıcısı bu medya arayan başladığında olay meydana | 3 |
| OnPause | Ortam, kullanıcı tarafından ya da programlı ya ara verildiğinde olay meydana | 3 |
| onplay | Olay medya başlatılmıştır oluşur veya artık duraklatıldıysa | 3 |
| onplaying | Ortam durdurulmuş ya da tamponlama için durdurulmuş sonra çalarken olay meydana | 3 |
| OnProgress | Tarayıcı medya verilerini alma sürecinde iken olay meydana (downloading the media) | 3 |
| onratechange | medyanın oynama hızı değiştiğinde olay meydana | 3 |
| onseeked | Kullanıcı medyada yeni bir konuma atlayarak / hareketli bittiğinde olay meydana | 3 |
| onseeking | Kullanıcı ortam içinde yeni bir konuma atlama / hareket etmeye başladığında olay meydana | 3 |
| onstalled | tarayıcı medya verilerini almaya çalışırken zaman olay gerçekleşir, ancak veri mevcut değildir | 3 |
| onsuspend | tarayıcı kasten medya verilerini almıyor olayı oluşur | 3 |
| ontimeupdate | oynama pozisyonu değiştirildiğinde olayı meydana gelir (gibi, ortamın içinde farklı bir noktada, kullanıcı hızlı ileri) | 3 |
| onvolumechange | medyanın hacmi ( "sessiz" ses ayarı dahil) değiştiğinde olay meydana | 3 |
| onwaiting | Etkinlik ortam durdurdu oluşur, ancak (ortam daha fazla veri tampon duraklıyorsa gibi) devam etmesi beklenmektedir | 3 |
Animasyon Etkinlikleri
Geçiş Olaylar
| Olay | Açıklama | DOM |
|---|
| transitionend | Bir CSS geçiş tamamlandığında olay meydana | 3 |
Sunucunun Gönderdiği Etkinlikler
| Olay | Açıklama | DOM |
|---|
| onerror | Bir hata olayı kaynağı ile ortaya çıktığında olay meydana | |
| onMessage | Bir ileti olay kaynağı yoluyla alındığında olay meydana | |
| OnOpen | Olay kaynağı ile bir bağlantı açıldığında olayı oluşur | |
Çeşitli Olaylar
| Olay | Açıklama | DOM |
|---|
| onMessage | Olay bir mesaj yoluyla veya bir nesneden alındığında oluşur (WebSocket, Web Worker, Event Source or a child frame or a parent window) | 3 |
| onmousewheel | Kullanımdan kaldırıldı. Kullanım onwheel yerine olay | |
| ononline | tarayıcı online çalışmaya başladığında olay meydana | 3 |
| onoffline | Tarayıcı çevrimdışı çalışmak başladığında olay meydana | 3 |
| onpopstate | pencerenin geçmişi değiştirdiğinde olay meydana | 3 |
| gösteri | Bir olayı oluşur <menu> öğesi bir içerik menüsü olarak gösterilen | 3 |
| onstorage | Bir Web Depolama alanı güncellendiğinde olay meydana | 3 |
| ontoggle | Kullanıcı açılıp kapandığında, olay gerçekleştiğinde <details> elemanı | 3 |
| onwheel | Fare tekerleği bir eleman üzerinde yukarı-aşağı hareket veya olay meydana | 3 |
Dokunmatik Olaylar
| Olay | Açıklama | DOM |
|---|
| ontouchcancel | Dokunmatik kesildiğinde olay meydana | |
| ontouchend | Bir parmak dokunmatik ekrandan kaldırıldığında olay meydana | |
| ontouchmove | Bir ekran parmağınızı sürüklendiğinde olay meydana | |
| ontouchstart | Bir parmak dokunmatik bir ekranda yerleştirildiğinde olay meydana | |
Olay Nesne
Sabitler
| sabit | Açıklama | DOM |
|---|
| CAPTURING_PHASE | Şimdiki olay faz yakalama aşaması olan (1) | 1 |
| AT_TARGET | Olay hedefe değerlendirilmektedir yani mevcut olayı, hedef fazında (2) | 2 |
| BUBBLING_PHASE | Şimdiki olay faz köpürme fazı (3) | 3 |
Özellikleri
| özellik | Açıklama | DOM |
|---|
| kabarcıklar | Belirli bir olayın köpüren bir olay olup olmadığını döndürür | 2 |
| iptal | Bir olay varsayılan eylem engellemiş olabilir İade olsun veya olmasın | 2 |
| currentTarget | kimin olay dinleyicileri olayı tetikleyen elemanı döndürür | 2 |
| defaultPrevented | İade olsun veya olmasın preventDefault() metodu olay için çağrıldı | 3 |
| eventPhase | Olay akışının faz anda değerlendirilmektedir döndürür | 2 |
| IsTrusted | Bir olay güvenilen olup olmadığını döndürür | 3 |
| hedef | Olayı tetikleyen elemanı döndürür | 2 |
| Zaman Damgası | Zamanını döndürür (in milliseconds relative to the epoch) olay yarattı alındığı | 2 |
| tip | Olayın adını döndürür | 2 |
| görünüm | olay oluştu Pencere nesnesine bir başvuru döndürür | 2 |
Yöntemler
| Yöntem | Açıklama | DOM |
|---|
| preventDefault() | o olaya ait varsayılan eylem gerçekleşmez, yani iptal olması durumunda olayı iptal eder | 2 |
| stopImmediatePropagation() | denilmekten aynı olayın diğer dinleyicileri önler | 3 |
| stopPropagation() | Olay akış sırasında bir olay daha da yayılmasını önler | 2 |
MouseEvent Nesne
| özellik | Açıklama | DOM |
|---|
| altKey | Olmadığını döndürür "ALT" fare olayı tetiklenir zaman tuşun basıldığını | 2 |
| düğme | Fare olay tetiklendiği zaman hangi fare düğmesini İade basıldı | 2 |
| düğmeleri | Fare olay tetiklendiği zaman hangi fare düğmelerine İade atıldığını | 3 |
| clientX | Fare olay tetiklenir zaman yatay mevcut pencere göreli olarak fare işaretçisi, koordinatını döndürür | 2 |
| clientY | Fare olay tetiklendiği zaman dikey geçerli pencere, göreli fare işaretçisi, koordinatı döndürür | 2 |
| ctrlKey | Olmadığını döndürür "CTRL" tuşu fare olayı tetiklenir zaman basılmış | 2 |
| detay | Fare tıklandığında kaç kez gösteren bir sayı döndürür | 2 |
| metakey | İade edip "META" bir olay tetiklendiği zaman tuşun basıldığını | 2 |
| pageX | Fare olay tetiklendiği zaman yatay belgeye, göreli fare işaretçisi, koordinatı döndürür | |
| SayfaY | Fare olay tetiklendiği zaman dikey belgeye göreceli fare işaretçisi, koordinatı döndürür | |
| relatedTarget | Fare olayı tetikleyen elemana ilişkin elemanı döndürür | 2 |
| screenX | Bir olay tetiklendiği zaman yatay ekranına göre fare işaretçisi, koordinatı döndürür | 2 |
| screenY | Bir olay tetiklendiği zaman dikey ekranına göreli fare işaretçisi, koordinatı döndürür | 2 |
| Shift tuşu | Olmadığını döndürür "SHIFT" bir olay tetiklendiği zaman tuşun basıldığını | 2 |
| hangi | Fare olay tetiklendiği zaman hangi fare düğmesini İade basıldı | 2 |
KeyboardEvent Nesne
| özellik | Açıklama | DOM |
|---|
| altKey | Olmadığını döndürür "ALT" tuşu olayı tetiklenmiş zaman tuşun basıldığını | 2 |
| ctrlKey | Olmadığını döndürür "CTRL" tuşu olayı tetiklenmiş zaman tuşun basıldığını | 2 |
| charCode | onkeypress olayı tetikleyen anahtar Unicode karakter kodunu döndürür | 2 |
| anahtar | olay ile temsil anahtarın anahtar değerini döndürür | 3 |
| Anahtar kod | onkeypress olayı tetikleyen anahtar veya onkeydown veya onkeyup olayı tetikleyen anahtar Unicode anahtar kod Unicode karakter kodunu döndürür | 2 |
| yer | klavye veya cihazda bir anahtarın yerini döndürür | 3 |
| metakey | İade edip "meta" anahtar anahtar olay tetiklendiği zaman basılmış | 2 |
| Shift tuşu | Olmadığını döndürür "SHIFT" tuşu olayı tetiklenmiş zaman tuşun basıldığını | 2 |
| hangi | onkeypress olayı tetikleyen anahtar veya onkeydown veya onkeyup olayı tetikleyen anahtar Unicode anahtar kod Unicode karakter kodunu döndürür | 2 |
HashChangeEvent Nesne
| özellik | Açıklama | DOM |
|---|
| NEWURL | karma değiştirildikten sonra, belgenin URL'sini döndürür | |
| OLDURL | karma değişmeden önce, belgenin URL'sini döndürür | |
PageTransitionEvent Nesne
| özellik | Açıklama | DOM |
|---|
| kalıcı | Web sayfası tarayıcı tarafından önbelleğe edildi döndürür olup olmadığını | |
FocusEvent Nesne
| özellik | Açıklama | DOM |
|---|
| relatedTarget | Etkinliği tetikleyen elemana ilişkin elemanı döndürür | 3 |
AnimationEvent Nesne
| özellik | Açıklama | DOM |
|---|
| animationName | Animasyonun adını döndürür | |
| geçen zaman | saniye sayısı bir animasyon çalışmakta olduğu İade | |
TransitionEvent Nesne
| özellik | Açıklama | DOM |
|---|
| mülkiyet adı | geçişle ilişkili CSS özelliğin adını döndürür | |
| geçen zaman | saniye sayısı bir geçiş çalışmakta olduğu İade | |
WheelEvent Nesne
| özellik | Açıklama | DOM |
|---|
| DELTAX | Fare tekerleği yatay kaydırma miktarını verir (x-axis) | 3 |
| deltaY | Fare tekerleği dikey kaydırma miktarını verir (y-axis) | 3 |
| deltaZ | z ekseni için bir fare tekerleğin kaydırma miktarını döndürür | 3 |
| deltaMode | Delta değerleri için ölçüm birimini temsil eden bir numara verir (pixels, lines or pages) | 3 |