Difference between HTML Event Handler vs DOM Level 0 Event Handler

Question

Could someone please tell me what is the difference between the implementation of a HTML event handler versus a DOM Level 0 event handler in JavaScript?

This may be of use to you: http://stackoverflow.com/q/5642659/830125 — Drew Gaynor, Oct 15 '15 at 19:42
Thank you very much, but it doesn't really answer whatbthe difference is — Jonny, Oct 15 '15 at 19:45
There is no DOM L0 spec, that term was only used to refer to non-standard widespread functionalities. Then they were standardized in HTML. — Oriol, Oct 15 '15 at 19:45
Thanks! It was a question on my test and he somehow explained it like:one does onclick="", and the other one says define a variable _b=document.getElementby then _b.onclick="". — Jonny, Oct 15 '15 at 19:47
I think this question should be refined to be clear what is being asked: a) How would one register events with one of the 2 methods? or b) How do browsers implement each of the 2 methods?, or maybe c) something else..., and if none of the previous, then go for d) close it — Alin Purcaru, Nov 11 '15 at 17:12

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

DOM0 Events are declarative events defined in the HTML and XHTML specifications as Intrinsic Events:

Intrinsic events are attributes that are used in conjunction with elements that can have specific events occur when certain actions are performed by the user. The attributes indicated in the following table are added to the attribute set for their respective elements only when the modules defining those elements are selected.

Certain elements of a markup language may have associated event handlers that are activated when certain events occur. User agents need to be able to identify those elements with event handlers statically associated (i.e., associated in the content, not in a script). In HTML 4 ([HTML4], section 18.2.3), intrinsic events are specified by the attributes beginning with the prefix "on": onblur, onchange, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreset, onselect, onsubmit, and onunload.

Internet Explorer has the correct scope for event handlers defined using the DOM Level 0 method of property assignment but not when using attachEvent().

 The Level 0 DOM supports the following nodeLists:

document.images[], which grants access to all images on the page.
document.forms[], which grants access to all forms on the page.
document.forms[].elements[], which grants access to all form fields in one form, whatever their tag name. This nodeList is unique to the Level 0 DOM; the W3C DOM does not have a similar construct.
document.links[], which grants access to all links () on the page.
document.anchors[], which grants access to all anchors () on the page.

The focus events defined in this specification occur in a set order relative to one another. The following is the typical sequence of events when a focus is shifted between elements (this order assumes that no element is initially focused):


Event Name  Notes
1.  focusin Sent before first target element receives focus
2.  focus   Sent after first target element receives focus
3.  focusout    Sent before first target element loses focus
4.  focusin Sent before second target element receives focus
5.  blur    Sent after first target element loses focus
6.  focus   Sent after second target element receives focus

The following is the typical sequence of events when a focus is shifted between elements, including the deprecated DOMFocusIn and DOMFocusOut events. The order shown assumes that no element is initially focused.

C.2.1 Legacy FocusEvent event order

Event Name  Notes
1.  focusin Sent before first target element receives focus
2.  focus   Sent after first target element receives focus
3.  DOMFocusIn  If supported
4.  focusout    Sent before first target element loses focus
5.  focusin Sent before second target element receives focus
6.  blur    Sent after first target element loses focus
7.  DOMFocusOut If supported
8.  focus   Sent after second target element receives focus
9.  DOMFocusIn  If supported

HTML Events are imperative events defined in the DOM specification as HTMLEvents:

<iframe src="https://www.w3.org/DOM/Graphics/dom2-map.svg" width="900" height="400"></iframe>
<img src="https://www.w3.org/TR/DOM-Level-3-Events/images/eventflow.svg" width="400" height="400"/>

References

Difference between HTML Event Handler vs DOM Level 0 Event Handler

1 Answers1