DOM догађаји

From Wikipedia, the free encyclopedia

Remove ads

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

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

Remove ads

Догађаји

HTML догађаји

Општи/W3C догађаји

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

  • Догађаји који се односе на миш[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]

Курсор Догађаји[8]

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

Више информација Категорија, Тип ...

Indie UI догађаји[9]

Иако још увек није стварно имплементиран, 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-специфични догађаји

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

  • Клипборд догађаји
  • Догађаји за везивање података
Више информација Категорија, Тип ...

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

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

XUL догађаји

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

Више информација Категорија, Тип ...

Остали догађаји

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

Remove ads

Ток догађаја

Размотрите ситуацију где су 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.

Remove ads

Објекат догађаја

Модели за руковање догађајима

DOM нивоа 0

Овај догађај руковање модел је представљен од стране Нетсцапе Навигатор, и остаје цросс-бровсер модел највише ажурирано: 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;
}

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

Традиционални model

У традиционалном моделу,[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));

DOM нивоа 2

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-специфични модел

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

Више информација Име, Опиц ...

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

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

Презапис примера коришћеног у старом Microsoft-специфичном моделу

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

Референце

Литература

Спољашње везе

Loading related searches...

Wikiwand - on

Seamless Wikipedia browsing. On steroids.

Remove ads
Remove ads