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

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


ДогађајиУреди

HTML догађајиУреди

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

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

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

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

Категорија Тип Својство Опис Bubbles Поништавање
Миш click onclick Испаљује се када се кликне на тастер показивачког уређаја док се курсор налази изнад неког елемента. Клик се дефинише као притискање и отпуштање тастера на истој позицији на екрану. Секвенца ових догађаја је:
  • mousedown
  • mouseup
  • click
Да Да
dblclick ondblclick Испаљује се када се два пута узастопно кликне на тастер показивачког уређаја док се курсор налази изнад неког елемента. Да Да
mousedown onmousedown Испаљује се када је притиснут тастер показивачког уређаја док се курсор налази изнад неког елемента. Да Да
mouseup onmouseup Испаљује се када је отпуштен тастер показивачког уређаја док се налази изнад неког елемента. Да Да
mouseover onmouseover Испаљује се када се курсор помери на неки елемент. Да Да
mousemove onmousemove Испаљује се када се курсор помера док се налази изнад неког елемента. Да Не
mouseout onmouseout Испаљује се када се курсор склони са неког елемента. Да Да
dragstart ondragstart Испаљује се за елемент за који је започето превлачење. Да Да
drag ondrag Овај догађај се испаљује над извором превлачења, тј. над елементом где је догађај dragstart испаљен, током операције превлачења. Да Да
dragenter ondragenter Испаљује се када је курсор померен на неки други елемент док је превлачење активно. Да Да
dragleave ondragleave Испаљује се када курсор напушта неки елемент док је превлачење активно. Да Не
dragover ondragover Испаљује се када се курсор помера преко неког елемента док је превлачење активно. Да Да
drop ondrop Испаљује се над елементом где је дошло до краја операције превлачења. Да Да
dragend ondragend Извор превлачења ће примити dragend догађај по завршетку превлачења, без обзира да ли је операција била успешна или не. Да Не
Тастатура keydown onkeydown Испаљује се пре догађаја keypress, када је тастер на тастатури притиснут. Да Да
keypress onkeypress Испаљује се након догађаја keydown, када је тастер на тастатури притиснут и отпуштен. Да Да
keyup onkeyup Испаљује се када је тастер на тастатури отпуштен. Да Да
HTML frame/object load onload Испаљује се када кориснички агент заврши учитавање целог садржаја унутар документа, укључујући прозор, фрејмове, објекте и слике.


За елементе, испаљује се када је циљни елемент и сав његов садржај завршио са учитавањем.

Не Не
unload onunload Испаљује се када кориснички агент уклања сам садржај из прозора или фрејма.


За елементе, испаљује се када се уклони циљани елемент или било који од његових садржаја.

Не Не
abort onabort Испаљује се када је слика/објекат престао са учитавањем пре него што је потпуно учитан. Да Не
error onerror Испаљује се када објекат/слика/фрејм не може бити учитан правилно Да Не
resize onresize Испаљује се када је гледиште документа променило величину. Да Не
scroll onscroll Испаљује се када је гледиште елемента или документа скроловано. Не[5] Не
HTML form select onselect Испаљује се када корисник селектује неки текст унутар текстуалног поља, укључујући input и textarea. Да Не
change onchange Испаљује се када елемент изгуби фокус и уколико је притом његова вредност измењена у односу на стање које је било пре фокусирања на елемент. Да Не
submit onsubmit Испаљује се када је формулар submit-ован Да Да
reset onreset Испаљује се када је формулар ресетован. Да Не
focus onfocus Испаљује се када неки елемент добије фокус преко показивачког уређаја или притиском на тастер tab. Не Не
blur onblur Испаљује се када неки елемент изгуби фокус преко показивачког уређаја или притиском на тастер tab. Не Не
Кориснички интерфејс focusin (нема) Слично HTML focus догађају, али може бити примењен над било којим елементом који може бити фокусиран. Да Не
focusout (нема) Слично HTML blur догађају, али може бити примењен над било којим елементом који може бити фокусиран. Да Не
DOMActivate (нема) Слично XUL командном догађају. Испаљује се када је неки елемент активиран, на пример преко догађаја click или keypress. Да Да
Мутациони DOMSubtreeModified (нема) Испаљује се ако је подстабло модификовано. Да Не
DOMNodeInserted (нема) Испаљује се када је чвор додат као дете неког другог чвора. Да Не
DOMNodeRemoved (нема) Испаљује се када је чвор уклоњен из DOM стабла. Да Не
DOMNodeRemovedFromDocument (нема) Испаљује се када је чвор уклоњен из документа. Не Не
DOMNodeInsertedIntoDocument (нема) Испаљује се када је чвор убачен у документ. Не Не
DOMAttrModified (нема) Испаљује се када је неко својство модификовано. Да Не
DOMCharacterDataModified (нема) Испаљује се када су карактерски подаци модификовани. Да Не
Progress loadstart (нема) Прогрес је започео. Не Не
progress (нема) У напретку. Након што је догађај loadstart послат. Не Не
error (нема) Напредак је неуспешан. Након што је последњи догађај progress послат, или након догађаја loadstart ако progress није послат. Не Не
abort (нема) Напредак је прекинут. Након што је последњи догађај progress послат, или након догађаја loadstart ако progress није послат. Не Не
load (нема) Напредак је успешан. Након што је последњи догађај progress послат, или након догађаја loadstart ако progress није послат. Не Не
loadend (нема) Напредак је заустављен. Након догађаја error, abort, или load. Не Не

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

Догађаји за додирУреди

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

Категорија Тип Атрибут Опис Bubbles Cancelable
Touch touchstart Испаљује се када се прст постави на одређену површину/екран. Да Да
touchend Испаљује се када се прст склони са одређене површине/екрана. Да Да
touchmove Испаљује се када се прст који је већ постављен на екран помера преко екрана. Да Да
touchenter Испаљује се када померимо тачку додира на интерактивно поље дефинисано Дом елементом. Да Да
touchleave Испаљује се када тачку додира померимо са интерактивног поља дефинисаним Дом елементом. Да Да
touchcancel Кориснчки агент шаље ову врсту догађаја како би нагласио када је дошло до померања тачке додира на неки специфичан начин, као што је кретање изван границе UA прозора. Кориснички агент такође шаље овај догађај када корисник има више тачака додира.[6]:§5.9 Да Не

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

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

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

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

Категорија Тип Својство Опис Балончићи Поништавање
Курсор pointerdown onpointerdown Опаљује када је дугме уређаја курсора активирано, или притиснуто преко елемента. Да Да
pointerup onpointerup Опаљује када је дугме уређаја отпуштено прекео елемента Да Да
pointercancel onpointercancel Опаљује када ће показивачки уређај највероватније да престане да производи догађај ѕбог, на пример, када је уређај коришћен за

померање/зумирање после pointerdown догађаја.

Да Да
pointermove onpointermove Опаљује када је показивачки уређај померен све док је преко елемента Да Да
pointerover onpointerover Опаљује када је показивачки уређај померен на елемент Да Да
pointerout onpointerout Опаљује када је показивачки уређај померен од елемента. Такође опаљује после pointerup од показивачког уређаја без лебдења преко или после Да Да
pointerenter onpointerenter Опаљује када је показивачки уређај померен на елемент, или када је дугме показивачког уређаја који не подржава лебдење преко елемента је притиснут на један од потомка елемента Не Да
pointerleave onpointerleave Опаљује када је показивачки уређај склоњен са елемент, или када је дугме показивачког уређаја који не подржава лебдење преко елемента је отпуштен са једног од потомка елемента Не Да
gotpointercapture ongotpointercapture Опаљује када је курсор ухваћен од setPointerCapture методе Да Не
lostpointercapture onlostpointercapture Опаљује када је курсор отпуштен од releasePointerCapture методе Да Не

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' на мобилним уређајима

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

Категорија Тип Опис Bubbles Поништавање
Захтев undorequest Указује на жељу корисника за поништавањем претходне акције. (Може бити замењена од стране интерфејса UndoManager.) Да Да
redorequest Указује на жељу корисника за поништавањем претходне акције поништавања. (Може бити замењена од стране интерфејса UndoManager.) Да Да
expandrequest Указује на жељу корисника за разоткривањем информације у прикривеној (скупљеној) секцији. Да Да
collapserequest Указује на жељу корисника за скривањем или скупљањем информација у проширеној секцији. Да Да
dismissrequest Указује на жељу корисника за одбацивањем текућег погледа (нпр. поништавање дијалога или затварање искачућег менија). Да Да
deleterequest Назначава да корисник жели да иницира акцију брисања над обележеним елементом или текућим погледом. Да Да
Захтев за фокусирање directionalfocusrequest Иницира се када кориснички агент шаље захтев "direction focus" Веб апликацији. Програмери не би требало да користе или региструју directionalfocusrequest догађаје јер су стандардни focus и blur догађаји довољни. Коришћење ових догађаја без потребе може резултовати смањењем перформанси и слично. Да Да
linearfocusrequest Initiated when the user agent sends a "linear focus" request to the web application. Web authors should not use or register for linearfocusrequest events when standard browser focus and blur events are sufficient. This event type is only necessary on specialized control types such as data grids where the logical next element may not be focusable or even in the DOM until requested. Using these events unnecessarily could result is reduced performance or an other negative user experience. Yes Yes
palettefocusrequest Initiated when the user agent sends a "palette focus" request to the web application. Web app authors receiving this event should move focus to the first palette in the web application, or cycle focus between all available palettes. Note: palettes are sometimes referred to as non-modal dialogs or inspector windows. Yes Yes
toolbarfocusrequest Initiated when the user agent sends a "toolbar focus" request to the web application. Web app authors receiving this event should move focus to the main toolbar in the web application, or cycle focus between all available toolbars. Yes Yes
Manipulation Request moverequest Initiated when the user agent sends a move request to the web application with accompanying x/y delta values. This is used, for example, when moving an object to a new location on a layout canvas. Yes Yes
panrequest Initiated when the user agent sends a pan request to the web application with accompanying x/y delta values. This is used, for example, when changing the center point while panning a map or another custom image viewer. Yes Yes
rotationrequest Initiated when the user agent sends a rotation request to the web application with accompanying origin x/y values and a rotation value in degrees. Yes Yes
zoomrequest Initiated when the user agent sends a zoom request to the web application with accompanying origin x/y values and the zoom scale factor. Yes Yes
Scroll Request scrollrequest Initiated when the user agent sends a scroll request to the web application with accompanying x/y delta values or one of the other defined scrollType values. Authors should only use this event and uiaction with custom scroll views. Yes Yes
ValueChange Request valuechangerequest Initiated when the user agent sends a value change request to the web application. Used on custom range controls like sliders, carousels, etc. Yes Yes

Microsoft-специфични догађајиУреди

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

  • Клипборд догађаји
  • Догађаји за везивање података
Категорија Тип Својство Опис Bubbles Поништавање
Клипборд cut oncut Испаљује се након што је селекција cut-ована на клипборд. Да Да
copy oncopy Испаљује се након што је селекција копирана на клипборд. Да Да
paste onpaste Испаљује се након што је селекција paste-ована са клипборда. Да Да
beforecut onbeforecut Испаљује се пре него што је селекција cut-ована на клипборд. Да Да
beforecopy onbeforecopy Испаљује се пре него што је селекција копирана на клипборд. Да Да
beforepaste onbeforepaste Испаљује се пре него што је селекција paste-ована са клипборда. Да Да
Везивање података afterupdate onafterupdate Испаљује се одмах након ажурирања објекта databound. Да Не
beforeupdate onbeforeupdate Испаљује се пре него што је извор података ажуриран. Да Да
cellchange oncellchange Испаљује се када дође до промене извора података. Да Не
dataavailable ondataavailable Испаљује се када нови подаци из извора података постану доступни. Да Не
datasetchanged ondatasetchanged Испаљује се када је садржај извора података промењен. Да Не
datasetcomplete ondatasetcomplete Испаљује се када је пренос података из извора података комплетиран. Да Не
errorupdate onerrorupdate Испаљује се ако настане грешка приликом ажурирања поља података. Да Не
rowenter onrowenter Испаљује се када је нови ред података из извора података доступан. Да Не
rowexit onrowexit Испаљује се када је ред података из извора података завршио. Не Да
rowsdelete onrowsdelete Испаљује се када је ред података из извора података обрисан. Да Не
rowinserted onrowinserted Испаљује се када је ред података из извора података убачен. Да Не
Миш contextmenu oncontextmenu Испаљује се када је контекстни мени приказан. Да Да
drag ondrag Испаљује се током превлачења мишем (над померајућим елементом). Да Да
dragstart ondragstart Испаљује се када започне превлачење мишем (над померајућим елементом). Да Да
dragenter ondragenter Испаљује се када је нешто превучено на површину неког елемента (над циљним елементом). Да Да
dragover ondragover Испаљује се када је превлачење задржано изнад неког елемента (над циљним елементом). Да Да
dragleave ondragleave Испаљује се када је нешто превучено са површине неког елемента (над циљним елементом). Да Да
dragend ondragend Испаљује се када је превлачење завршено (над померајућим елементом). Да Да
drop ondrop Испаљује се када је тастер миша отпуштен изнад валидног циља током превлачења (над циљним елементом). Да Да
selectstart onselectstart Испаљује се када је корисник започео са означавањем текста. Да Да
Тастатура help onhelp Испаљује се када корисник иницира помоћ. Да Да
HTML frame/object beforeunload onbeforeunload Испаљује се пре него што је садржај документа "испражњен". Не Да
stop onstop Испаљује се када је корисник зауставио учитавање објекта. (за разлику од abort, stop догађај може бити придружен документу) Не Не
HTML form beforeeditfocus onbeforeeditfocus Испаљује се када елемент добије фокус за едитовање. Да Да
Marquee start onstart Испаљује се када marquee започне нову петљу. Не Не
finish onfinish Испаљује се када је marquee петља завршена. Не Да
bounce onbounce Испаљује се када скролујући marquee одскочи назад у супротном правцу. Не Да
Разни beforeprint onbeforeprint Испаљује се пре него што је документ одштампан. Не Не
afterprint onafterprint Испаљује се одмах након што је документ одштампан. Не Не
propertychange onpropertychange Испаљује се када је поље неког објекта измењено. Не Не
filterchange onfilterchange Испаљује се када филтер измени поље или заврши транзицију. Не Не
readystatechange onreadystatechange Испаљује се када се readyState поље неког елемента измени. Не Не
losecapture onlosecapture Испаљује се када је метод releaseCapture позван. Не Не

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

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

XUL догађајиУреди

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

Категорија Тип Атрибут Опис Bubbles Cancelable
Миш DOMMouseScroll DOMMouseScroll Јавља се када се помера део миша за скроловање, при чему се сам садржај скролује. Да Да
dragdrop ondragdrop Јавља се када корисник отпусти дугме миша и при томе одустаје од повлачења неког објекта. Не Не
dragenter ondragenter Јавља се када се показивач миша налази изнад неког елемента али га при том и помера, слично је mouseover догађају само се јавља током померања миша. Не Не
dragexit ondragexit Јавља се када се показивач миша помери изван елемента након повлачења. Назива се и испуштање елемента. Слично је mouseout догађају али се јавља током померања. Не Не
draggesture ondraggesture Јавља се када корисник повлачи неки елемент, обично држећи притиснут тастер миша и померајући га. Не Не
dragover ondragover У релацији је са mousemove догађајем, јавља се када се нешто убаци у елемент. Не Не
Улазни догађаји CheckboxStateChange Јавља се када се чекбокс чекира или одчекира, од стране корисника или скрипта. Не Не
RadioStateChange Јавља се када је радио дугме селектовано, од стране корисника или скрипта. Не Не
close onclose Јавља се када се пошаље захтев за искључивање прозора. Не Да
command oncommand Слично W3C DOMActivate догађају. Јавља се када је неки елемнт активан, на пример, кликом миша или тастера. Не Не
input oninput Јавља се када корисник унесе неки текст у текст поље. Да Не
Кориснички интерфејс DOMMenuItemActive DOMMenuItemActive Јавља се када се прикаже или истакне мени. Да Не
DOMMenuItemInactive DOMMenuItemInactive Јавља се када се престане приказивати мени. Да Не
contextmenu oncontextmenu Јавља се када корисник захтева да се отвори контекст мени елемента. Активација овог догађаја зависи од платформе, али је то обично десни клик. Не Да
overflow onoverflow Приказује се кутијица или некакав другачији приказ елемнта, када нема довољно простора да се тај елемент прикаже у пуној величини. Не Не
overflowchanged onoverflowchanged Јавља се када се направи измена за overflow догађај. Не Не
underflow onunderflow Јавља се на неки елемент када постоји довољно простора за приказивање тог елемента у пуној величини. Не Не
popuphidden onpopuphidden Јавља popup након што је био скривен. Не Не
popuphiding onpopuphiding Fires to a popup when it is about to be hidden. Не Не
popupshowing onpopupshowing Fires to a popup just before it is popped open. Не Да
popupshown onpopupshown Fires to a popup after it has been opened, much like the onload event is sent to a window when it is opened. Не Не
Команде broadcast onbroadcast Placed on an observer. The broadcast event is sent when the attributes of the broadcaster being listened to are changed. Не Не
commandupdate oncommandupdate Јавља се када је појавила наредба за ажурирање. Не Не

Остали догађајиУреди

За Мозилу и Оперу 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.

Објекат догађајаУреди

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

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.

Име Опис Тип аргумента Име аргумента
addEventListener Allows the registration of event listeners on the event target. DOMString type
EventListener listener
boolean useCapture
removeEventListener Allows the removal of event listeners from the event target. DOMString type
EventListener listener
boolean useCapture
dispatchEvent Allows sending the event to the subscribed event listeners. Event evt

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

  • Да бисте спречили догађај из мехурића??, морате позвати "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]

Име Опиц Аргумент type Аргумент name
attachEvent Слично W3C addEventListener методу. String sEvent
Pointer fpNotify
detachEvent Слично W3C removeEventListener методу. String sEvent
Pointer fpNotify
fireEvent Слично W3C's dispatchEvent методу. String sEvent
Event oEventObject

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

  • Да бисте спречили догађај 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>

РеференцеУреди

  1. ^ 7.8 Drag and drop — HTML5
  2. ^ Drag and drop - Web developer guide | MDN
  3. ^ Progress Events
  4. ^ File API
  5. ^ „Document Object Model (DOM) Level 3 Events Specification (working draft)”. W3C. Приступљено 17. 4. 2013. 
  6. ^ а б в „Touch Events version 2 - W3C Editor's Draft”. W3C. 14. 11. 2011. Приступљено 10. 12. 2011. 
  7. ^ „Apple using patents to undermine open standards again”. opera.com. 9. 12. 2011. Приступљено 9. 12. 2011. 
  8. ^ Pointer Events
  9. ^ IndieUI: Events 1.0
  10. ^ „Introduction to Events”. Quirksmode.org. Приступљено 15. 9. 2012. 
  11. ^ „Document Object Model (DOM) Level 2 Events Specification”. W3C. 13. 11. 2000. Приступљено 15. 9. 2012. 
  12. ^ „Early event handlers”. Quirksmode.org. Приступљено 15. 9. 2012. 
  13. ^ „Traditional event registration model”. Quirksmode.org. Приступљено 15. 9. 2012. 
  14. ^ „DOM Level 3 Events support in IE9”. Microsoft. 26. 3. 2010. Приступљено 28. 3. 2010. 
  15. ^ „Compatibility changes in IE11 Preview”. Microsoft. 9. 9. 2013. Приступљено 5. 10. 2013. 

ЛитератураУреди


Спољашње везеУреди