DOM догађаји
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 | Испаљује се када се кликне на тастер показивачког уређаја док се курсор налази изнад неког елемента. Клик се дефинише као притискање и отпуштање тастера на истој позицији на екрану. Секвенца ових догађаја је:
| Да | Да |
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>
Референце
- ^ 7.8 Drag and drop — HTML5
- ^ Drag and drop - Web developer guide | MDN
- ^ Progress Events
- ^ File API
- ^ „Document Object Model (DOM) Level 3 Events Specification (working draft)”. W3C. Приступљено 17. 4. 2013.
- ^ а б в „Touch Events version 2 - W3C Editor's Draft”. W3C. 14. 11. 2011. Приступљено 10. 12. 2011.
- ^ „Apple using patents to undermine open standards again”. opera.com. 9. 12. 2011. Приступљено 9. 12. 2011.
- ^ Pointer Events
- ^ IndieUI: Events 1.0
- ^ „Introduction to Events”. Quirksmode.org. Приступљено 15. 9. 2012.
- ^ „Document Object Model (DOM) Level 2 Events Specification”. W3C. 13. 11. 2000. Приступљено 15. 9. 2012.
- ^ „Early event handlers”. Quirksmode.org. Приступљено 15. 9. 2012.
- ^ „Traditional event registration model”. Quirksmode.org. Приступљено 15. 9. 2012.
- ^ „DOM Level 3 Events support in IE9”. Microsoft. 26. 3. 2010. Приступљено 28. 3. 2010.
- ^ „Compatibility changes in IE11 Preview”. Microsoft. 9. 9. 2013. Приступљено 5. 10. 2013.
Литература
- 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