DOM olayları - DOM events

DOM (Belge Nesne Modeli) Olayları , bir şeyin meydana geldiğine veya meydana gelmekte olduğuna dair bir sinyaldir ve kullanıcı etkileşimleri veya tarayıcı tarafından tetiklenebilir. JavaScript , JScript , ECMAScript , VBScript ve Java gibi istemci tarafı betik dilleri , HTML , XHTML , XUL ve SVG belgeleri gibi bir DOM ağacı içindeki öğe düğümlerinde çeşitli olay işleyicileri veya dinleyicileri kaydedebilir .

DOM Olaylarına Örnekler:

• Kullanıcı fareye tıkladığında
• Bir web sayfası yüklendiğinde
• Bir resim yüklendiğinde
• Fare bir öğenin üzerine geldiğinde
• Bir giriş alanı değiştirildiğinde
• Bir HTML formu gönderildiğinde
• Kullanıcı bir tuşa bastığında

Tarihsel olarak, DOM gibi, çeşitli web tarayıcıları tarafından kullanılan olay modelleri de bazı önemli farklılıklara sahipti. Bu, uyumluluk sorunlarına neden oldu. Bununla mücadele etmek için olay modeli World Wide Web Consortium (W3C) tarafından DOM Seviye 2'de standartlaştırıldı.

Olaylar

HTML olayları

Ortak olaylar

Çoğu öğe düğümü tarafından oluşturulabilecek çok sayıda olay vardır:

• Fare olayları.
• Klavye olayları.
• HTML çerçevesi/nesne olayları.
• HTML form olayları.
• Kullanıcı arayüzü olayları.
• Mutasyon olayları (bir belgenin yapısındaki herhangi bir değişikliğin bildirimi).
• İlerleme olayları ( XMLHttpRequest , File API tarafından kullanılır ).

Yukarıdaki olay sınıflandırmasının W3C'nin sınıflandırmasıyla tam olarak aynı olmadığını unutmayın.

Not o isimleri start "DOM" ile şu anda iyi desteklenmemektedir ve bu ve diğer performans nedenleriyle DOM Seviye 3'te W3C tarafından artık kullanılmamaktadır olaylar Mozilla ve Opera desteği DOMAttrModified , DOMNodeInserted , DOMNodeRemoved ve DOMCharacterDataModified . Chrome ve Safari , DOMAttrModified dışında bu etkinlikleri destekler .

Dokunma etkinlikleri

Apple'ın iOS'u ve Google'ın Android'i gibi dokunmatik özellikli cihazlarda çalışan web tarayıcıları ek etkinlikler oluşturur.

Gelen W3C taslak önerisi, bir TouchEventbir teslim TouchListait Touchyerleri, değiştirici tuşları etkin olan bir TouchListbölgesinin Touchhedef DOM öğesindeki konumları ve TouchListbir Touchönceki sonra değişen konumlarda TouchEvent.

Apple bu çalışma grubuna katılmadı ve patentleri öneri sürecinde geç açıklayarak W3C'nin Touch Events Spesifikasyonu önerisini erteledi .

İşaretçi olayları

Fare, dokunmatik panel ve kalem gibi çeşitli giriş aygıtlarına sahip aygıtlardaki web tarayıcıları, tümleşik girdi olayları oluşturabilir. Kullanıcılar, ne tür bir giriş aygıtına basıldığını, o aygıtta hangi düğmeye basıldığını ve bir stylus kalem söz konusu olduğunda düğmeye ne kadar güçlü basıldığını görebilir. Ekim 2013 itibariyle bu etkinlik yalnızca Internet Explorer 10 ve 11 tarafından desteklenmektedir.

Bağımsız kullanıcı arayüzü etkinlikleri

Henüz gerçek anlamda uygulanmayan Indie UI çalışma grupları, web uygulaması geliştiricilerinin, kendisiyle eşleşebilecek farklı platforma özgü teknik olayları işlemek zorunda kalmadan standart kullanıcı etkileşimi olaylarını destekleyebilmelerine yardımcı olmak istiyor.

Kullanılabilir arabirimleri komut dosyası yazmak, özellikle kullanıcı arabirimi tasarım modellerinin yazılım platformları, donanım ve yerel ayarlar arasında farklılık gösterdiği ve bu etkileşimlerin kişisel tercihlere göre daha fazla özelleştirilebileceği düşünüldüğünde zor olabilir. Bireyler, arayüzün kendi sistemlerinde çalışma şekline alışkındır ve tercih ettikleri arayüz, web uygulaması yazarının tercih ettiği arayüzden sıklıkla farklıdır.

Örneğin, bir kullanıcının son eylemi geri alma niyetini engellemek isteyen web uygulaması yazarlarının, aşağıdaki tüm olayları "dinlemesi" gerekir:

• Windows ve Linux'ta Control+Z.
• Mac OS X'te Command+Z.
• Bazı mobil cihazlarda olayları sallayın.

Önceki eylemi "geri almak" için tek, normalleştirilmiş bir isteği dinlemek daha kolay olacaktır.

Internet Explorer'a özgü olaylar

Ortak (W3C) olaylara ek olarak, Internet Explorer tarafından iki ana olay türü eklenir . Bazı olaylar, diğer tarayıcılar tarafından fiili standartlar olarak uygulanmıştır .

• Pano olayları.
• Veri bağlama olayları.

Mozilla, Safari ve Opera'nın XMLHttpRequest nesnesi için readystatechange olayını da desteklediğini unutmayın . Mozilla ayrıca geleneksel olay kayıt yöntemini (DOM Düzey 0) kullanarak ön yükleme olayını da destekler. Mozilla ve Safari de bağlam menüsünü destekler, ancak Mac için Internet Explorer desteklemez.

Firefox 6 ve sonraki sürümlerin, baskı öncesi ve baskı sonrası olaylarını desteklediğini unutmayın.

XUL etkinlikleri

Ortak (W3C) olaylara ek olarak Mozilla, yalnızca XUL öğeleriyle çalışan bir dizi olay tanımladı .

Diğer olaylar

Mozilla ve Opera 9 için, DOM içeriği yüklendiğinde tetiklenen DOMContentLoaded ve DOMFrameContentLoaded olarak bilinen belgelenmemiş olaylar da vardır . Bunlar, ilgili dosyaların (örn. resimler) yüklenmesinden önce tetiklendikleri için "yükleme"den farklıdır. Ancak, DOMContentLoaded, HTML 5 belirtimine eklenmiştir . DOMContentLoaded olayı, Webkit oluşturma motoru derlemesi 500+' da da uygulandı . Bu, tüm Google Chrome ve Safari 3.1+ sürümleriyle ilişkilidir . DOMContentLoaded, Internet Explorer 9'da da uygulanmaktadır .

Opera 9 ayrıca Web Forms 2.0 olaylarını DOMControlValueChanged , geçersiz , forminput ve formchange'i de destekler .

Olay akışı

Bir ağaca iki olay hedefinin katıldığı durumu düşünün . Her ikisinin de aynı olay türünde kayıtlı olay dinleyicileri var, "tıkla" deyin. Kullanıcı iç öğeye tıkladığında, onu işlemenin iki olası yolu vardır:

• Öğeleri dıştan içe doğru tetikleyin (olay yakalama). Bu model Netscape Navigator'da uygulanmaktadır .
• Öğeleri içten dışa doğru tetikleyin ( olay köpürmesi ). Bu model, Internet Explorer ve diğer tarayıcılarda uygulanmaktadır.

W3C bu mücadelede orta konumdadır.

W3C'ye göre, bir olay hedefi bir ağaca katıldığında olaylar üç aşamadan geçer:

1. Yakalama aşaması: olay, kök olay hedefinden bir olayın hedefine doğru iner.
2. Hedef aşaması: olay, olay hedefinden geçer
3. Balon aşaması ( isteğe bağlı ): olay, bir olayın hedefinden kök olay hedefine geri döner. Balon aşaması yalnızca baloncuk oluşturan olaylar için gerçekleşir (nerede event.bubbles == true)

Bu olay akışının görselleştirmesini https://domevents.dev adresinde bulabilirsiniz.

Etkinlikleri durdurma

Bir olay olay dinleyicileri arasında dolaşırken olay event.stopPropagation()veya ile durdurulabilir.event.stopImmediatePropagation()

• event.stopPropagation(): mevcut olay aşamasında mevcut olay hedefine bağlı tüm olay dinleyicileri bittikten sonra olay durdurulur
• event.stopImmediatePropagation(): olay hemen durdurulur ve başka olay dinleyicisi yürütülmez

Bir olay durdurulduğunda artık olay yolu boyunca hareket etmeyecektir. Bir etkinliği durdurmak, bir etkinliği iptal etmez.

Bir olayı durdurmak için eski mekanizmalar

• Set event.cancelBubbleiçin true(Internet Explorer)
• event.returnValueÖzelliği şuna ayarlafalse

Etkinlikleri iptal etme

Bir cancelableetkinlik arayarak iptal edilebilir event.preventDefault(). Bir etkinliği iptal etmek, o etkinlik için varsayılan tarayıcı davranışını devre dışı bırakır. Bir etkinlik iptal edildiğinde, event.defaultPreventedözellik olarak ayarlanır true. Bir etkinliği iptal etmek, etkinliğin etkinlik yolu boyunca ilerlemesini durdurmaz.

Olay nesnesi

Event nesnesi, belirli bir olay hakkında, hedef öğe, basılan tuş, basılan fare düğmesi, fare konumu vb. dahil olmak üzere birçok bilgi sağlar. Ne yazık ki, bu alanda çok ciddi tarayıcı uyumsuzlukları vardır. Bu nedenle, bu makalede yalnızca W3C Event nesnesi tartışılmaktadır.

Olay işleme modelleri

DOM Düzey 0

Bu olay işleme modeli Netscape Navigator tarafından tanıtıldı ve 2005 itibariyle en çapraz tarayıcı modeli olmaya devam ediyor. İki model türü vardır: satır içi model ve geleneksel model.

satır içi model

Satır içi modelde, olay işleyicileri öğelerin nitelikleri olarak eklenir. Aşağıdaki örnekte , köprü tıklandıktan sonra "Hey Joe" mesajını içeren bir uyarı iletişim kutusu görüntülenir . Varsayılan tıklama eylemi, olay işleyicide false döndürülerek iptal edilir.

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Inline Event Handling</title>
</head>
<body>

	<h1>Inline Event Handling</h1>

	<p>Hey <a href="http://www.example.com" onclick="triggerAlert('Joe'); return false;">Joe</a>!</p>

	<script>
		function triggerAlert(name) {
			window.alert("Hey " + name);
		}
	</script>
</body>
</html>

İnline modeliyle Bir Sanıldığının onu örn özel savları tamamen olay işleyicileri kayıt sağlayan inançtır nameiçinde triggerAlertişlevi. Yukarıdaki örnekte durum böyle gibi görünse de, gerçekte olan şey, tarayıcının JavaScript motorunun , öznitelikteki ifadeleri içeren anonim bir işlev oluşturmasıdır onclick. onclickElemanın işleyici aşağıdaki anonim işlevine bağlı olacaktır:

function () {
	triggerAlert('Joe');
	return false;
}

JavaScript olay modelinin bu sınırlaması, genellikle olay işleyicinin işlev nesnesine nitelikler atanarak veya kapanışlar kullanılarak aşılır .

Geleneksel model

Geleneksel modelde, olay işleyicileri komut dosyalarıyla eklenebilir veya kaldırılabilir. Satır içi modelde olduğu gibi, her olayın yalnızca bir olay işleyicisi kayıtlı olabilir. Olay, öğe nesnesinin olay özelliğine işleyici adı atanarak eklenir. Bir olay işleyicisini kaldırmak için özelliği null olarak ayarlamanız yeterlidir:

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Traditional Event Handling</title>
</head>

<body>
	<h1>Traditional Event Handling</h1>
	
	<p>Hey Joe!</p>

	<script>
		var triggerAlert = function () {
			window.alert("Hey Joe");
		};
		
		// Assign an event handler
		document.onclick = triggerAlert;
		
		// Assign another event handler
		window.onload = triggerAlert;
		
		// Remove the event handler that was just assigned
		window.onload = null;
	</script>
</body>
</html>

Parametre eklemek için:

var name = 'Joe';
document.onclick = (function (name) {
	return function () {
		alert('Hey ' + name + '!');
	};
}(name));

İç işlevler kapsamlarını korurlar .

DOM Düzey 2

W3C, DOM Düzey 2'de daha esnek bir olay işleme modeli tasarladı.

Bilmeniz gereken bazı yararlı şeyler:

• Bir olayın köpürmesini önlemek için geliştiriciler stopPropagation(), olay nesnesinin yöntemini çağırmalıdır .
• Etkinliğin varsayılan eyleminin çağrılmasını önlemek için geliştiriciler preventDefault(), olay nesnesinin yöntemini çağırmalıdır .

Geleneksel modelden temel farkı, aynı olay için birden fazla olay işleyicinin kaydedilebilmesidir. Bu useCaptureseçenek, işleyicinin köpürme aşaması yerine yakalama aşamasında çağrılması gerektiğini belirtmek için de kullanılabilir. Bu model Mozilla , Opera , Safari , Chrome ve Konqueror tarafından desteklenmektedir .

Geleneksel modelde kullanılan örneğin yeniden yazılması

<!doctype html>
<html lang="en">
<head>
     <meta charset="utf-8">
     <title>DOM Level 2</title>
</head>

<body>
     <h1>DOM Level 2</h1>
     
     <p>Hey Joe!</p>
     
     
     <script>
          var heyJoe = function () {
               window.alert("Hey Joe!");
          }
          
          // Add an event handler
          document.addEventListener( "click", heyJoe, true );  // capture phase
          
          // Add another event handler
          window.addEventListener( "load", heyJoe, false );  // bubbling phase
          
          // Remove the event handler just added
          window.removeEventListener( "load", heyJoe, false );
     </script>

</body>
</html>

Internet Explorer'a özgü model

Sürüm 8'den önceki Microsoft Internet Explorer, W3C standardının onaylanmasından önce kendi modeli oluşturulduğundan W3C modelini izlemez. Internet Explorer 9, DOM düzey 3 olaylarını takip eder ve Internet Explorer 11, Microsoft'a özel model desteğini siler.

Bilmeniz gereken bazı yararlı şeyler:

• Bir olayın köpürmesini önlemek için geliştiricilerin olayın cancelBubbleözelliğini ayarlaması gerekir .
• Etkinliğin varsayılan eyleminin çağrılmasını önlemek için geliştiricilerin etkinliğin returnValueözelliğini ayarlaması gerekir .
• thisAnahtar kelime küresel atıfta windownesne.

Yine, bu model, aynı olay için birden fazla olay işleyicinin kaydedilebilmesi bakımından geleneksel modelden farklıdır. Ancak bu useCaptureseçenek, yakalama aşamasında işleyicinin çağrılması gerektiğini belirtmek için kullanılamaz. Bu model, Microsoft Internet Explorer ve Trident tabanlı tarayıcılar (örn. Maxthon , Avant Browser ) tarafından desteklenmektedir.

Eski Internet Explorer'a özgü modelde kullanılan örneğin yeniden yazılması

<!doctype html>
<html lang="en">
<head>
     <meta charset="utf-8">
     <title>Internet Explorer-specific model</title>
</head>
<body>
     <h1>Internet Explorer-specific model</h1>

     <p>Hey Joe!</p>

     <script>
          var heyJoe = function () {
               window.alert("Hey Joe!");
          }
          
          // Add an event handler
          document.attachEvent("onclick", heyJoe);
          
          // Add another event handler
          window.attachEvent("onload", heyJoe);
          
          // Remove the event handler just added
          window.detachEvent("onload", heyJoe);
     </script>

</body>
</html>

Referanslar

• Deitel, Harvey. (2002). İnternet ve World Wide Web: nasıl programlanır (İkinci Baskı). ISBN  0-13-030897-8
• Mozilla Organizasyonu. (2009). DOM Olay Referansı . 25 Ağustos 2009'da erişildi.
• Quirksmode (2008). Olay uyumluluk tabloları . 27 Kasım 2008'de erişildi.
• http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

Dış bağlantılar

• Belge Nesne Modeli (DOM) Düzey 2 Olayları Spesifikasyonu
• Belge Nesne Modeli (DOM) Seviye 3 Olayları Çalışma Taslağı
• DOM4: Etkinlikler (Editörün Taslağı)
• UI Etkinlikleri Çalışma Taslağı
• Pointer Events W3C Aday Önerisi
• MSDN İşaretçisiEtkinliği
• domevents.dev - Keşif yoluyla DOM Olayları hakkında bilgi edinmek için bir görselleştirici
• Olay Köpürtme ve Yakalama için JS kemanı

Referanslar