DOM догађаји

Овај чланак је започет или проширен кроз пројекат семинарских радова. Потребно је проверити превод, правопис и вики-синтаксу. Када завршите са провером, допишете да након |проверено=.

DOM (Document Object Model) догађаји дозвољавају програмским језицима заснованим на догађајима попут JavaScript, JScript, ECMAScript, VBScript и Java да региструју разне руковаоце догађајима/ослушкиваче догађаја над чворовима елемената унутар DOM стабла (нпр. HTML, XHTML, XUL, SVG документи).

Историјски гледано, модели догађаја коришћени од стране различитих Веб прегледача су имали неких значајнијих разлика. Ово је изазивало проблеме са компатибилношћу. Да би се изборили са овим, модел догађаја је стандардизован од стране W3C у DOM-у нивоа 2.

Постоји огромна колекција догађаја који могу бити генерисани од стране многих чворова елемената:

• Догађаји који се односе на миш^[1][2]
• Догађаји који се односе на тастатуру
• HTML frame/object догађаји
• HTML form догађаји
• Догађаји корисничког интерфејса
• Мутациони догађаји (обавештења о било каквим променама структуре документа)
• Догађаји везани за напредак^[3] (коришћени од стране XMLHttpRequest, File API,^[4] ...)

Горенаведена класификација догађаја није потпуно иста као W3C класификација.

Уочите да догађаји који започињу са “DOM” тренутно нису добро подржани, и због ових и других разлога везаних за перформансе су означени као застарели од стране W3C у DOM-у нивоа 3. Mozilla и Опера подржавају DOMAttrModified, DOMNodeInserted, DOMNodeRemoved и DOMCharacterDataModified. Chrome и Safari подржавају све ове догађаје, осим DOMAttrModified.

Интернет прегледачи који раде на уређајима са екраном осетљивим на додир, као што су Apple's iOS i Google-ov Android, генеришу додатне догађаје.^[6]‍:§5.3

у W3C препоруци, TouchEvent даје TouchList од Touch локација, modifier key који су активни, TouchList од Touch локација у оквиру циљаног Дом елемента, и TouchList од Touch локација које су измењене у односу на претходни TouchEvent.^[6]

Apple се није придржао ове препоруке, и W3C препорука у вези са Touch Events спецификацијом је одложена.^[7]

Интернет прегледачи на уређајима са различитим улазом укључујући миша, екран на додир, и оловку могу да генеришу интегрисане улазне догађаје. Корисници могу да виде који тип улазног уређаја је притиснут, које дугме је притиснуто на уређају, и колико јако оловка за цртање притиснута. Од Октобра 2013, овај догађај је подржан на Internet Explorer 10 и 11.

Иако још увек није стварно имплементиран, Indie UI радне групе желе да помогну програмерима веб апликација да буду у могућности прихвате догађаје стандардне интеракције корисника беѕ потребе за различитим платформама посебних техничких догађаја without having to handle different platform specific technical events that could match with it.

Скрипт употребљиви интерфејс може бити тежак, нарочито када се узме у обзир да се дизајн корисничког интерфејса разликује иѕмеђу софтверских платформи, хардвера и LOCALES, и да те интеракције могу бити додатно прилагођене на основу личног избора. Појединци су навикли да интерфејс раде на свом систему, а њихов омиљени интерфејс се често разликује од пожељног интерфејса веб апликације аутора

На пример, аутори веб апликација, зеле да пресретну намеру корисника tercept за наредбом 'undo' у последњој акцији, треба да "слушају" ѕа све следеће наредбе:

• control+z на Windows и Linux.
• command+z на Mac OS X.
• 'Shake events' на мобилним уређајима

Било би једноставније да се ослушкује за појединачан, нормализован захтев за поништавање претходне акције.

Два главна типа догађаја су додата од стране Microsoft-а, и у неким случајевима могу бити употребљавани само у Internet Explorer-у. Остали догађаји су имплементирани као стандард од стране других прегледача Веба.

• Клипборд догађаји
• Догађаји за везивање података

Mozilla, Safari и Opera такође подржавају readystatechange догађај за објекат типа XMLHttpRequest. Mozilla такође подржава догађај beforeunload користећи традиционално регистровање догађаја (DOM нивоа 0). Mozilla и Safari подржавају и contextmenu, али Internet Explorer за Mac не.

Firefox 6 и касније верзије подржавају beforeprint и afterprint догађаје.

Поред уобичајених W3C догађаја, Mozilla је дефинисала скуп догађаја који раде само са XUL елементима.

За Мозилу и Оперу 9, постоје и недокументовани догађаји познати као "DOMContentLoaded" и "DOMFrameContentLoaded".

Размотрите ситуацију где су 2 елемента угнијежђена. Оба имају event handlers регистрована на исти тип догађаја, рецимо "click".

Када корисник кликне Consider the situation when there are 2 elements nested together. Both have event handlers registered on the same event type, say "click". When the user clicks on the inner element, there are two possible ways to handle it:

• Trigger the elements from outer to inner (event capturing). This model is implemented in Netscape Navigator.
• Trigger the elements from inner to outer (event bubbling). This model is implemented in Internet Explorer and other browsers.^[10]

W3C takes a middle position in this struggle.^{[11]‍:§1.2} Events are first captured until it reaches the target element, and then bubbled up. During the event flow, an event can be responded to at any element in the path (an observer) in either phase by causing an action, and/or by stopping the event (with method event.stopPropagation() for W3C-conforming browsers and command event.cancelBubble = true for Internet Explorer), and/or by cancelling the default action for the event.

Овај догађај руковање модел је представљен од стране Нетсцапе Навигатор, и остаје цросс-бровсер модел највише ажурирано: 2005.^{[ажурирање]}.^{[тражи се извор]} Постоје две врсте модела:. Редни Модел и традиционални модел.

У редним моделу,^[12] догађаја сировина се додају као атрибути елемената. У примеру, alert dialog box са поруком "Хеи Јое" се појављује након hyperlink се кликне. Клик акција подразумевани је отказан повратком лажне у случају руковалац.

<!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>

Један од уобичајених заблуда^{[тражи се извор]} са редним модела је уверење да омогућава регистрацију управљање догађајима са прилагођеним аргументима, на пример name у triggerAlert. Иако то може изгледати као да је случај у претходном примеру, оно што се стварно дешава јесте да JavaScript engine од претраживача ствара anonymous function садржи изјаве у onclick атрибут. onclick тргује елемента ће бити у обавези да у следећем анонимног функције:

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

Ово ограничење догађаја модела ЈаваСцрипт је обично превазиђу доделом атрибута у функцији предмета евент хандлер или помоћу затварачи.

У традиционалном моделу,^[13] модели за руковање догађајима могу бити додати или уклоњени од стране скрипта. Као и у линијском моделу, може постојати само једно руковање догађајем над неким елементом. Дођај се додаје додавањем имена догађаја објекту елемента. Да би склонили неки догађај руковања, једноставно му вредност поставимо на null:

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Традиционално руковање догађајем</title>
</head>

<body>
	<h1>Традиционално руковање догађајем</h1>
	
	<p>Здраво Љубиша!</p>

	<script>
		var triggerAlert = function () {
			window.alert("Здраво Љубиша");
		};
		
		// Додељивање догађаја за руковање
		document.onclick = triggerAlert;
		
		// Додељивање другог догађаја за руковање
		window.onload = triggerAlert;
		
		// Уклањање догађаја за руковање
		window.onload = null;
	</script>
</body>
</html>

Да би додали параметре:

var name = 'Љубиша';
document.onclick = (function (name) {
	return function () {
		alert('Здраво ' + name + '!');
	};
}(name));

W3C је дизајнирао још флексибилније моделе ѕа руковање догађајима у ДОМ-у нивоа 2.

Неке корисне ствари које се требају ѕнати:

• Да бисте спречили догађај из мехурића??, морате позвати "stopPropagation()" метод објекта догађаја.
• Да би спречили подразумевану акцију догађаја која се зове, програмери морају звати "preventDefault" метод објекта догађаја.

Главна разлика од традиционалног модела је да се више ручних догађаја може регистровати на истом догађају. useCapture опција се такође може користити ѕа спецификацију да догађај може бити позван у фази хватања, уместо у фаѕи БАЛОНЧИЋА. Овај модел подржавају Mozilla, Opera, Safari, Chrome and Konqueror.

<!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>

Microsoft није пратио W3C препоруку до Internet Explorer-а 8, имао је креиран сопствени модел пре успостављања W3C стандарда. Internet Explorer 9 прати DOM догађаје нивоа 3,,^[14] Internet Explorer 11 престаје са праћењем Microsoft-овог модела.^[15]

Неке корисне информације:

• Да бисте спречили догађај bubbling, треба да поставите догађај cancelBubble.
• Да бисте спречили подразумевани позив неког догађаја, треба да поставите догађај "returnValue".
• this се односи на глобални window(прозор) објекта.

<!doctype html>
<html lang="en">
<head>
     <meta charset="utf-8">
     <title>Microsoft-specific model</title>
</head>
<body>
     <h1>Microsoft-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>

• Deitel, Harvey (2002). Internet and World Wide Web: how to program (2nd изд.). ISBN 978-0-13-030897-9. 
• The Mozilla Organization. (2009). DOM Event Reference. Retrieved August 25, 2009.
• Quirksmode (2008). Event compatibility tables. Retrieved November 27, 2008.
• http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

• Објектни модел документа (DOM) нивоа 2 Спецификација догађаја
• Објектни модел документа (DOM) нивоа 3 Радни нацрт догађаја
• DOM4: Догађаји
• UI Радни нацрт догађаја
• Догађаји за курсор
• MSDN PointerEvent
• JS fiddle for Event Bubbling and Capturing