DOM događaji

DOM (Document Object Model) događaji dozvoljavaju programskim jezicima zasnovanim na događajima poput JavaScript, JScript, ECMAScript, VBScript i Java da registruju razne rukovaoce događajima/osluškivače događaja nad čvorovima elemenata unutar DOM stabla (npr. HTML, XHTML, XUL, SVG dokumenti).

Istorijski gledano, modeli događaja korišćeni od strane različitih Veb pregledača su imali nekih značajnijih razlika. Ovo je izazivalo probleme sa kompatibilnošću. Da bi se izborili sa ovim, model događaja je standardizovan od strane W3C u DOM-u nivoa 2.

Događaji

HTML događaji

Opšti/W3C događaji

Postoji ogromna kolekcija događaja koji mogu biti generisani od strane mnogih čvorova elemenata:

• Događaji koji se odnose na miš
• Događaji koji se odnose na tastaturu
• HTML frame/object događaji
• HTML form događaji
• Događaji korisničkog interfejsa
• Mutacioni događaji (obaveštenja o bilo kakvim promenama strukture dokumenta)
• Događaji vezani za napredak (korišćeni od strane XMLHttpRequest, File API, ...)

Gorenavedena klasifikacija događaja nije potpuno ista kao W3C klasifikacija.

Kategorija	Tip	Svojstvo	Opis	Bubbles	Poništavanje
Miš	click	onclick	Ispaljuje se kada se klikne na taster pokazivačkog uređaja dok se kursor nalazi iznad nekog elementa. Klik se definiše kao pritiskanje i otpuštanje tastera na istoj poziciji na ekranu. Sekvenca ovih događaja je: mousedown mouseup click	Da	Da
	dblclick	ondblclick	Ispaljuje se kada se dva puta uzastopno klikne na taster pokazivačkog uređaja dok se kursor nalazi iznad nekog elementa.	Da	Da
	mousedown	onmousedown	Ispaljuje se kada je pritisnut taster pokazivačkog uređaja dok se kursor nalazi iznad nekog elementa.	Da	Da
	mouseup	onmouseup	Ispaljuje se kada je otpušten taster pokazivačkog uređaja dok se nalazi iznad nekog elementa.	Da	Da
	mouseover	onmouseover	Ispaljuje se kada se kursor pomeri na neki element.	Da	Da
	mousemove	onmousemove	Ispaljuje se kada se kursor pomera dok se nalazi iznad nekog elementa.	Da	Ne
	mouseout	onmouseout	Ispaljuje se kada se kursor skloni sa nekog elementa.	Da	Da
	dragstart	ondragstart	Ispaljuje se za element za koji je započeto prevlačenje.	Da	Da
	drag	ondrag	Ovaj događaj se ispaljuje nad izvorom prevlačenja, tj. nad elementom gde je događaj dragstart ispaljen, tokom operacije prevlačenja.	Da	Da
	dragenter	ondragenter	Ispaljuje se kada je kursor pomeren na neki drugi element dok je prevlačenje aktivno.	Da	Da
	dragleave	ondragleave	Ispaljuje se kada kursor napušta neki element dok je prevlačenje aktivno.	Da	Ne
	dragover	ondragover	Ispaljuje se kada se kursor pomera preko nekog elementa dok je prevlačenje aktivno.	Da	Da
	drop	ondrop	Ispaljuje se nad elementom gde je došlo do kraja operacije prevlačenja.	Da	Da
	dragend	ondragend	Izvor prevlačenja će primiti dragend događaj po završetku prevlačenja, bez obzira da li je operacija bila uspešna ili ne.	Da	Ne
Tastatura	keydown	onkeydown	Ispaljuje se pre događaja keypress, kada je taster na tastaturi pritisnut.	Da	Da
	keypress	onkeypress	Ispaljuje se nakon događaja keydown, kada je taster na tastaturi pritisnut i otpušten.	Da	Da
	keyup	onkeyup	Ispaljuje se kada je taster na tastaturi otpušten.	Da	Da
HTML frame/object	load	onload	Ispaljuje se kada korisnički agent završi učitavanje celog sadržaja unutar dokumenta, uključujući prozor, frejmove, objekte i slike. Za elemente, ispaljuje se kada je ciljni element i sav njegov sadržaj završio sa učitavanjem.	Ne	Ne
	unload	onunload	Ispaljuje se kada korisnički agent uklanja sam sadržaj iz prozora ili frejma. Za elemente, ispaljuje se kada se ukloni ciljani element ili bilo koji od njegovih sadržaja.	Ne	Ne
	abort	onabort	Ispaljuje se kada je slika/objekat prestao sa učitavanjem pre nego što je potpuno učitan.	Da	Ne
	error	onerror	Ispaljuje se kada objekat/slika/frejm ne može biti učitan pravilno	Da	Ne
	resize	onresize	Ispaljuje se kada je gledište dokumenta promenilo veličinu.	Da	Ne
	scroll	onscroll	Ispaljuje se kada je gledište elementa ili dokumenta skrolovano.	Ne	Ne
HTML form	select	onselect	Ispaljuje se kada korisnik selektuje neki tekst unutar tekstualnog polja, uključujući input i textarea.	Da	Ne
	change	onchange	Ispaljuje se kada element izgubi fokus i ukoliko je pritom njegova vrednost izmenjena u odnosu na stanje koje je bilo pre fokusiranja na element.	Da	Ne
	submit	onsubmit	Ispaljuje se kada je formular submit-ovan	Da	Da
	reset	onreset	Ispaljuje se kada je formular resetovan.	Da	Ne
	focus	onfocus	Ispaljuje se kada neki element dobije fokus preko pokazivačkog uređaja ili pritiskom na taster tab.	Ne	Ne
	blur	onblur	Ispaljuje se kada neki element izgubi fokus preko pokazivačkog uređaja ili pritiskom na taster tab.	Ne	Ne
Korisnički interfejs	focusin	(nema)	Slično HTML focus događaju, ali može biti primenjen nad bilo kojim elementom koji može biti fokusiran.	Da	Ne
	focusout	(nema)	Slično HTML blur događaju, ali može biti primenjen nad bilo kojim elementom koji može biti fokusiran.	Da	Ne
	DOMActivate	(nema)	Slično XUL komandnom događaju. Ispaljuje se kada je neki element aktiviran, na primer preko događaja click ili keypress.	Da	Da
Mutacioni	DOMSubtreeModified	(nema)	Ispaljuje se ako je podstablo modifikovano.	Da	Ne
	DOMNodeInserted	(nema)	Ispaljuje se kada je čvor dodat kao dete nekog drugog čvora.	Da	Ne
	DOMNodeRemoved	(nema)	Ispaljuje se kada je čvor uklonjen iz DOM stabla.	Da	Ne
	DOMNodeRemovedFromDocument	(nema)	Ispaljuje se kada je čvor uklonjen iz dokumenta.	Ne	Ne
	DOMNodeInsertedIntoDocument	(nema)	Ispaljuje se kada je čvor ubačen u dokument.	Ne	Ne
	DOMAttrModified	(nema)	Ispaljuje se kada je neko svojstvo modifikovano.	Da	Ne
	DOMCharacterDataModified	(nema)	Ispaljuje se kada su karakterski podaci modifikovani.	Da	Ne
Progress	loadstart	(nema)	Progres je započeo.	Ne	Ne
	progress	(nema)	U napretku. Nakon što je događaj loadstart poslat.	Ne	Ne
	error	(nema)	Napredak je neuspešan. Nakon što je poslednji događaj progress poslat, ili nakon događaja loadstart ako progress nije poslat.	Ne	Ne
	abort	(nema)	Napredak je prekinut. Nakon što je poslednji događaj progress poslat, ili nakon događaja loadstart ako progress nije poslat.	Ne	Ne
	load	(nema)	Napredak je uspešan. Nakon što je poslednji događaj progress poslat, ili nakon događaja loadstart ako progress nije poslat.	Ne	Ne
	loadend	(nema)	Napredak je zaustavljen. Nakon događaja error, abort, ili load.	Ne	Ne

Uočite da događaji koji započinju sa “DOM” trenutno nisu dobro podržani, i zbog ovih i drugih razloga vezanih za performanse su označeni kao zastareli od strane W3C u DOM-u nivoa 3. Mozilla i Opera podržavaju DOMAttrModified, DOMNodeInserted, DOMNodeRemoved i DOMCharacterDataModified. Chrome i Safari podržavaju sve ove događaje, osim DOMAttrModified.

Događaji za dodir

Internet pregledači koji rade na uređajima sa ekranom osetljivim na dodir, kao što su Apple's iOS i Google-ov Android, generišu dodatne događaje.

Kategorija	Tip	Atribut	Opis	Bubbles	Cancelable
Touch	touchstart		Ispaljuje se kada se prst postavi na određenu površinu/ekran.	Da	Da
	touchend		Ispaljuje se kada se prst skloni sa određene površine/ekrana.	Da	Da
	touchmove		Ispaljuje se kada se prst koji je već postavljen na ekran pomera preko ekrana.	Da	Da
	touchenter		Ispaljuje se kada pomerimo tačku dodira na interaktivno polje definisano Dom elementom.	Da	Da
	touchleave		Ispaljuje se kada tačku dodira pomerimo sa interaktivnog polja definisanim Dom elementom.	Da	Da
	touchcancel		Korisnčki agent šalje ovu vrstu događaja kako bi naglasio kada je došlo do pomeranja tačke dodira na neki specifičan način, kao što je kretanje izvan granice UA prozora. Korisnički agent takođe šalje ovaj događaj kada korisnik ima više tačaka dodira.	Da	Ne

u W3C preporuci, TouchEvent daje TouchList od Touch lokacija, modifier key koji su aktivni, TouchList od Touch lokacija u okviru ciljanog Dom elementa, i TouchList od Touch lokacija koje su izmenjene u odnosu na prethodni TouchEvent.

Apple se nije pridržao ove preporuke, i W3C preporuka u vezi sa Touch Events specifikacijom je odložena.

Kursor Događaji

Internet pregledači na uređajima sa različitim ulazom uključujući miša, ekran na dodir, i olovku mogu da generišu integrisane ulazne događaje. Korisnici mogu da vide koji tip ulaznog uređaja je pritisnut, koje dugme je pritisnuto na uređaju, i koliko jako olovka za crtanje pritisnuta. Od Oktobra 2013, ovaj događaj je podržan na Internet Explorer 10 i 11.

Kategorija	Tip	Svojstvo	Opis	Balončići	Poništavanje
Kursor	pointerdown	onpointerdown	Opaljuje kada je dugme uređaja kursora aktivirano, ili pritisnuto preko elementa.	Da	Da
	pointerup	onpointerup	Opaljuje kada je dugme uređaja otpušteno prekeo elementa	Da	Da
	pointercancel	onpointercancel	Opaljuje kada će pokazivački uređaj najverovatnije da prestane da proizvodi događaj ѕbog, na primer, kada je uređaj korišćen za pomeranje/zumiranje posle pointerdown događaja.	Da	Da
	pointermove	onpointermove	Opaljuje kada je pokazivački uređaj pomeren sve dok je preko elementa	Da	Da
	pointerover	onpointerover	Opaljuje kada je pokazivački uređaj pomeren na element	Da	Da
	pointerout	onpointerout	Opaljuje kada je pokazivački uređaj pomeren od elementa. Takođe opaljuje posle pointerup od pokazivačkog uređaja bez lebdenja preko ili posle	Da	Da
	pointerenter	onpointerenter	Opaljuje kada je pokazivački uređaj pomeren na element, ili kada je dugme pokazivačkog uređaja koji ne podržava lebdenje preko elementa je pritisnut na jedan od potomka elementa	Ne	Da
	pointerleave	onpointerleave	Opaljuje kada je pokazivački uređaj sklonjen sa element, ili kada je dugme pokazivačkog uređaja koji ne podržava lebdenje preko elementa je otpušten sa jednog od potomka elementa	Ne	Da
	gotpointercapture	ongotpointercapture	Opaljuje kada je kursor uhvaćen od setPointerCapture metode	Da	Ne
	lostpointercapture	onlostpointercapture	Opaljuje kada je kursor otpušten od releasePointerCapture metode	Da	Ne

Indie UI događaji

Iako još uvek nije stvarno implementiran, Indie UI radne grupe žele da pomognu programerima veb aplikacija da budu u mogućnosti prihvate događaje standardne interakcije korisnika beѕ potrebe za različitim platformama posebnih tehničkih događaja without having to handle different platform specific technical events that could match with it.

Skript upotrebljivi interfejs može biti težak, naročito kada se uzme u obzir da se dizajn korisničkog interfejsa razlikuje iѕmeđu softverskih platformi, hardvera i LOCALES, i da te interakcije mogu biti dodatno prilagođene na osnovu ličnog izbora. Pojedinci su navikli da interfejs rade na svom sistemu, a njihov omiljeni interfejs se često razlikuje od poželjnog interfejsa veb aplikacije autora

Na primer, autori veb aplikacija, zele da presretnu nameru korisnika tercept za naredbom 'undo' u poslednjoj akciji, treba da "slušaju" ѕa sve sledeće naredbe:

• control+z na Windows i Linux.
• command+z na Mac OS X.
• 'Shake events' na mobilnim uređajima

Bilo bi jednostavnije da se osluškuje za pojedinačan, normalizovan zahtev za poništavanje prethodne akcije.

Kategorija	Tip	Opis	Bubbles	Poništavanje
Zahtev	undorequest	Ukazuje na želju korisnika za poništavanjem prethodne akcije. (Može biti zamenjena od strane interfejsa UndoManager.)	Da	Da
	redorequest	Ukazuje na želju korisnika za poništavanjem prethodne akcije poništavanja. (Može biti zamenjena od strane interfejsa UndoManager.)	Da	Da
	expandrequest	Ukazuje na želju korisnika za razotkrivanjem informacije u prikrivenoj (skupljenoj) sekciji.	Da	Da
	collapserequest	Ukazuje na želju korisnika za skrivanjem ili skupljanjem informacija u proširenoj sekciji.	Da	Da
	dismissrequest	Ukazuje na želju korisnika za odbacivanjem tekućeg pogleda (npr. poništavanje dijaloga ili zatvaranje iskačućeg menija).	Da	Da
	deleterequest	Naznačava da korisnik želi da inicira akciju brisanja nad obeleženim elementom ili tekućim pogledom.	Da	Da
Zahtev za fokusiranje	directionalfocusrequest	Inicira se kada korisnički agent šalje zahtev "direction focus" Veb aplikaciji. Programeri ne bi trebalo da koriste ili registruju directionalfocusrequest događaje jer su standardni focus i blur događaji dovoljni. Korišćenje ovih događaja bez potrebe može rezultovati smanjenjem performansi i slično.	Da	Da
	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-specifični događaji

Dva glavna tipa događaja su dodata od strane Microsoft-a, i u nekim slučajevima mogu biti upotrebljavani samo u Internet Explorer-u. Ostali događaji su implementirani kao standard od strane drugih pregledača Veba.

• Klipbord događaji
• Događaji za vezivanje podataka

Kategorija	Tip	Svojstvo	Opis	Bubbles	Poništavanje
Klipbord	cut	oncut	Ispaljuje se nakon što je selekcija cut-ovana na klipbord.	Da	Da
	copy	oncopy	Ispaljuje se nakon što je selekcija kopirana na klipbord.	Da	Da
	paste	onpaste	Ispaljuje se nakon što je selekcija paste-ovana sa klipborda.	Da	Da
	beforecut	onbeforecut	Ispaljuje se pre nego što je selekcija cut-ovana na klipbord.	Da	Da
	beforecopy	onbeforecopy	Ispaljuje se pre nego što je selekcija kopirana na klipbord.	Da	Da
	beforepaste	onbeforepaste	Ispaljuje se pre nego što je selekcija paste-ovana sa klipborda.	Da	Da
Vezivanje podataka	afterupdate	onafterupdate	Ispaljuje se odmah nakon ažuriranja objekta databound.	Da	Ne
	beforeupdate	onbeforeupdate	Ispaljuje se pre nego što je izvor podataka ažuriran.	Da	Da
	cellchange	oncellchange	Ispaljuje se kada dođe do promene izvora podataka.	Da	Ne
	dataavailable	ondataavailable	Ispaljuje se kada novi podaci iz izvora podataka postanu dostupni.	Da	Ne
	datasetchanged	ondatasetchanged	Ispaljuje se kada je sadržaj izvora podataka promenjen.	Da	Ne
	datasetcomplete	ondatasetcomplete	Ispaljuje se kada je prenos podataka iz izvora podataka kompletiran.	Da	Ne
	errorupdate	onerrorupdate	Ispaljuje se ako nastane greška prilikom ažuriranja polja podataka.	Da	Ne
	rowenter	onrowenter	Ispaljuje se kada je novi red podataka iz izvora podataka dostupan.	Da	Ne
	rowexit	onrowexit	Ispaljuje se kada je red podataka iz izvora podataka završio.	Ne	Da
	rowsdelete	onrowsdelete	Ispaljuje se kada je red podataka iz izvora podataka obrisan.	Da	Ne
	rowinserted	onrowinserted	Ispaljuje se kada je red podataka iz izvora podataka ubačen.	Da	Ne
Miš	contextmenu	oncontextmenu	Ispaljuje se kada je kontekstni meni prikazan.	Da	Da
	drag	ondrag	Ispaljuje se tokom prevlačenja mišem (nad pomerajućim elementom).	Da	Da
	dragstart	ondragstart	Ispaljuje se kada započne prevlačenje mišem (nad pomerajućim elementom).	Da	Da
	dragenter	ondragenter	Ispaljuje se kada je nešto prevučeno na površinu nekog elementa (nad ciljnim elementom).	Da	Da
	dragover	ondragover	Ispaljuje se kada je prevlačenje zadržano iznad nekog elementa (nad ciljnim elementom).	Da	Da
	dragleave	ondragleave	Ispaljuje se kada je nešto prevučeno sa površine nekog elementa (nad ciljnim elementom).	Da	Da
	dragend	ondragend	Ispaljuje se kada je prevlačenje završeno (nad pomerajućim elementom).	Da	Da
	drop	ondrop	Ispaljuje se kada je taster miša otpušten iznad validnog cilja tokom prevlačenja (nad ciljnim elementom).	Da	Da
	selectstart	onselectstart	Ispaljuje se kada je korisnik započeo sa označavanjem teksta.	Da	Da
Tastatura	help	onhelp	Ispaljuje se kada korisnik inicira pomoć.	Da	Da
HTML frame/object	beforeunload	onbeforeunload	Ispaljuje se pre nego što je sadržaj dokumenta "ispražnjen".	Ne	Da
	stop	onstop	Ispaljuje se kada je korisnik zaustavio učitavanje objekta. (za razliku od abort, stop događaj može biti pridružen dokumentu)	Ne	Ne
HTML form	beforeeditfocus	onbeforeeditfocus	Ispaljuje se kada element dobije fokus za editovanje.	Da	Da
Marquee	start	onstart	Ispaljuje se kada marquee započne novu petlju.	Ne	Ne
	finish	onfinish	Ispaljuje se kada je marquee petlja završena.	Ne	Da
	bounce	onbounce	Ispaljuje se kada skrolujući marquee odskoči nazad u suprotnom pravcu.	Ne	Da
Razni	beforeprint	onbeforeprint	Ispaljuje se pre nego što je dokument odštampan.	Ne	Ne
	afterprint	onafterprint	Ispaljuje se odmah nakon što je dokument odštampan.	Ne	Ne
	propertychange	onpropertychange	Ispaljuje se kada je polje nekog objekta izmenjeno.	Ne	Ne
	filterchange	onfilterchange	Ispaljuje se kada filter izmeni polje ili završi tranziciju.	Ne	Ne
	readystatechange	onreadystatechange	Ispaljuje se kada se readyState polje nekog elementa izmeni.	Ne	Ne
	losecapture	onlosecapture	Ispaljuje se kada je metod releaseCapture pozvan.	Ne	Ne

Mozilla, Safari i Opera takođe podržavaju readystatechange događaj za objekat tipa XMLHttpRequest. Mozilla takođe podržava događaj beforeunload koristeći tradicionalno registrovanje događaja (DOM nivoa 0). Mozilla i Safari podržavaju i contextmenu, ali Internet Explorer za Mac ne.

Firefox 6 i kasnije verzije podržavaju beforeprint i afterprint događaje.

XUL događaji

Pored uobičajenih W3C događaja, Mozilla je definisala skup događaja koji rade samo sa XUL elementima.

Kategorija	Tip	Atribut	Opis	Bubbles	Cancelable
Miš	DOMMouseScroll	DOMMouseScroll	Javlja se kada se pomera deo miša za skrolovanje, pri čemu se sam sadržaj skroluje.	Da	Da
	dragdrop	ondragdrop	Javlja se kada korisnik otpusti dugme miša i pri tome odustaje od povlačenja nekog objekta.	Ne	Ne
	dragenter	ondragenter	Javlja se kada se pokazivač miša nalazi iznad nekog elementa ali ga pri tom i pomera, slično je mouseover događaju samo se javlja tokom pomeranja miša.	Ne	Ne
	dragexit	ondragexit	Javlja se kada se pokazivač miša pomeri izvan elementa nakon povlačenja. Naziva se i ispuštanje elementa. Slično je mouseout događaju ali se javlja tokom pomeranja.	Ne	Ne
	draggesture	ondraggesture	Javlja se kada korisnik povlači neki element, obično držeći pritisnut taster miša i pomerajući ga.	Ne	Ne
	dragover	ondragover	U relaciji je sa mousemove događajem, javlja se kada se nešto ubaci u element.	Ne	Ne
Ulazni događaji	CheckboxStateChange		Javlja se kada se čekboks čekira ili odčekira, od strane korisnika ili skripta.	Ne	Ne
	RadioStateChange		Javlja se kada je radio dugme selektovano, od strane korisnika ili skripta.	Ne	Ne
	close	onclose	Javlja se kada se pošalje zahtev za isključivanje prozora.	Ne	Da
	command	oncommand	Slično W3C DOMActivate događaju. Javlja se kada je neki elemnt aktivan, na primer, klikom miša ili tastera.	Ne	Ne
	input	oninput	Javlja se kada korisnik unese neki tekst u tekst polje.	Da	Ne
Korisnički interfejs	DOMMenuItemActive	DOMMenuItemActive	Javlja se kada se prikaže ili istakne meni.	Da	Ne
	DOMMenuItemInactive	DOMMenuItemInactive	Javlja se kada se prestane prikazivati meni.	Da	Ne
	contextmenu	oncontextmenu	Javlja se kada korisnik zahteva da se otvori kontekst meni elementa. Aktivacija ovog događaja zavisi od platforme, ali je to obično desni klik.	Ne	Da
	overflow	onoverflow	Prikazuje se kutijica ili nekakav drugačiji prikaz elemnta, kada nema dovoljno prostora da se taj element prikaže u punoj veličini.	Ne	Ne
	overflowchanged	onoverflowchanged	Javlja se kada se napravi izmena za overflow događaj.	Ne	Ne
	underflow	onunderflow	Javlja se na neki element kada postoji dovoljno prostora za prikazivanje tog elementa u punoj veličini.	Ne	Ne
	popuphidden	onpopuphidden	Javlja popup nakon što je bio skriven.	Ne	Ne
	popuphiding	onpopuphiding	Fires to a popup when it is about to be hidden.	Ne	Ne
	popupshowing	onpopupshowing	Fires to a popup just before it is popped open.	Ne	Da
	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.	Ne	Ne
Komande	broadcast	onbroadcast	Placed on an observer. The broadcast event is sent when the attributes of the broadcaster being listened to are changed.	Ne	Ne
	commandupdate	oncommandupdate	Javlja se kada je pojavila naredba za ažuriranje.	Ne	Ne

Ostali događaji

Za Mozilu i Operu 9, postoje i nedokumentovani događaji poznati kao "DOMContentLoaded" i "DOMFrameContentLoaded".

Tok događaja

Razmotrite situaciju gde su 2 elementa ugniježđena. Oba imaju event handlers registrovana na isti tip događaja, recimo "click".

Kada korisnik klikne 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.

W3C takes a middle position in this struggle. 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.

Modeli za rukovanje događajima

DOM nivoa 0

Ovaj događaj rukovanje model je predstavljen od strane Netscape Navigator, i ostaje cross-brovser model najviše ažurirano: 2005.. Postoje dve vrste modela:. Redni Model i tradicionalni model.

Linijski model

U rednim modelu, događaja sirovina se dodaju kao atributi elemenata. U primeru, alert dialog box sa porukom "Hei Joe" se pojavljuje nakon hyperlink se klikne. Klik akcija podrazumevani je otkazan povratkom lažne u slučaju rukovalac.

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

Jedan od uobičajenih zabluda sa rednim modela je uverenje da omogućava registraciju upravljanje događajima sa prilagođenim argumentima, na primer name u triggerAlert. Iako to može izgledati kao da je slučaj u prethodnom primeru, ono što se stvarno dešava jeste da JavaScript engine od pretraživača stvara anonymous function sadrži izjave u onclick atribut. onclick trguje elementa će biti u obavezi da u sledećem anonimnog funkcije:

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

Ovo ograničenje događaja modela JavaScript je obično prevaziđu dodelom atributa u funkciji predmeta event handler ili pomoću zatvarači.

Tradicionalni model

U tradicionalnom modelu, modeli za rukovanje događajima mogu biti dodati ili uklonjeni od strane skripta. Kao i u linijskom modelu, može postojati samo jedno rukovanje događajem nad nekim elementom. Dođaj se dodaje dodavanjem imena događaja objektu elementa. Da bi sklonili neki događaj rukovanja, jednostavno mu vrednost postavimo na 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>

Da bi dodali parametre:

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

DOM nivoa 2

W3C je dizajnirao još fleksibilnije modele ѕa rukovanje događajima u DOM-u nivoa 2.

Ime	Opis	Tip argumenta	Ime argumenta
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

Neke korisne stvari koje se trebaju ѕnati:

• Da biste sprečili događaj iz mehurića??, morate pozvati "stopPropagation()" metod objekta događaja.
• Da bi sprečili podrazumevanu akciju događaja koja se zove, programeri moraju zvati "preventDefault" metod objekta događaja.

Glavna razlika od tradicionalnog modela je da se više ručnih događaja može registrovati na istom događaju. useCapture opcija se takođe može koristiti ѕa specifikaciju da događaj može biti pozvan u fazi hvatanja, umesto u faѕi BALONČIĆA. Ovaj model podržavaju Mozilla, Opera, Safari, Chrome and Konqueror.

Prezapis primera korišćenog u tradicionalnom modelu

<!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-specifični model

Microsoft nije pratio W3C preporuku do Internet Explorer-a 8, imao je kreiran sopstveni model pre uspostavljanja W3C standarda. Internet Explorer 9 prati DOM događaje nivoa 3,, Internet Explorer 11 prestaje sa praćenjem Microsoft-ovog modela.

Ime	Opic	Argument type	Argument name
attachEvent	Slično W3C addEventListener metodu.	String	sEvent
		Pointer	fpNotify
detachEvent	Slično W3C removeEventListener metodu.	String	sEvent
		Pointer	fpNotify
fireEvent	Slično W3C's dispatchEvent metodu.	String	sEvent
		Event	oEventObject

Neke korisne informacije:

• Da biste sprečili događaj bubbling, treba da postavite događaj cancelBubble.
• Da biste sprečili podrazumevani poziv nekog događaja, treba da postavite događaj "returnValue".
• this se odnosi na globalni window(prozor) objekta.

Prezapis primera korišćenog u starom Microsoft-specifičnom modelu

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

Literatura

• Deitel, Harvey (2002). Internet and World Wide Web: how to program (2nd izd.). 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/

Spoljašnje veze

• Objektni model dokumenta (DOM) nivoa 2 Specifikacija događaja
• Objektni model dokumenta (DOM) nivoa 3 Radni nacrt događaja
• DOM4: Događaji
• UI Radni nacrt događaja
• Događaji za kursor
• MSDN PointerEvent
• JS fiddle for Event Bubbling and Capturing