{"id":83,"date":"2005-09-09T14:49:19","date_gmt":"2005-09-09T14:49:19","guid":{"rendered":"http:\/\/lachy.id.au\/log\/2005\/09\/dom-2-events"},"modified":"2006-10-19T06:43:50","modified_gmt":"2006-10-19T06:43:50","slug":"dom-2-events","status":"publish","type":"post","link":"https:\/\/lachy.id.au\/log\/2005\/09\/dom-2-events","title":{"rendered":"DOM 2 Events"},"content":{"rendered":"

The Document\r\n\t\tObject Model Level 2<\/a> defines several interfaces for an event\r\n\thandling model, called DOM\r\n\t2 Events<\/a>, that is far superior to the traditional\r\n\tmodel <\/a>used by most web developers around the world. In the traditional model,\r\n\tyou assign an event handler to an object using the onevent properties. e.g.\r\n\twindow.onload = fn;<\/code>. This has many limitations, with the most annoying being\r\n\tthat it only accepts one event handler.<\/p>\r\n

In the past, many attempts have been made to work around these issues, with\r\n\tone of the most widely known being Scott Andrew LePera\u2019s Crossbrowser\r\n\tDOM Scripting: Event Handlers<\/a>. Recently, Peter-Paul Koch wrote an article entitled addEvent()<\/code>\tConsidered Harmful<\/a>. Following this, he launched a competition<\/a> for someone to\r\n\trewrite the addEvent()<\/code> function and write a new removeEvent()<\/code> function to address\r\n\tthe issues with the original.<\/p>\r\n

A few days ago, after I heard about addEvent()<\/code>, I began work on a new script\r\n\tto address many of the issues with it. The\r\n\tresult<\/a> is beyond anything that was\r\n\texpected for the competition. In fact, I\u2019m pretty sure it\u2019s beyond what most\r\n\tmere mortals even considered possible: I implemented much of the DOM 2 Events\r\n\tinterfaces in IE!<\/p>\r\n

What does that mean exactly? Well, it means that you can now use the W3C\u2019s\r\n\tsuperior DOM2 model across browsers without any of the mess. For example, a\r\n\tscript that used to be written like this:<\/p>\r\n\t\r\n

var foo = document.getElementById(\"foo\");\r\nfoo.onclick = go;\r\n\r\nfunction go(evt) {\r\n    evt = evt || window.event;\r\n    target = evt.target || evt.srcElement;\r\n    \/\/ Handle other cross-browser issues\r\n    doSomething(target);\r\n    ...\r\n}<\/code><\/pre>\r\n
That can now be reduced to this much more sane method from the DOM2 interfaces:<\/p>\r\n\r\n
var foo = document.getElementById(\"foo\");\r\nfoo.addEventListener(\"click\", go, false);\r\n\r\nfunction go(evt) {\r\n    doSomething(evt.target);\r\n    ...\r\n}<\/code><\/pre>\r\n\r\n
There\u2019s no need to check for evt || window.event<\/code>, nor any need to check\r\n\tfor\r\n\tevt.target || evt.srcElement<\/code>. Much of that cross-browser incompatibility\r\n\tmess is taken care of by my script. All that you, the authors, have to do\r\n\tis work with the standard DOM 2 interfaces! You can take a look at the heavily\r\n\tcommented script<\/a> and also my\r\n\tentry for PPK\u2019s competition<\/a>, which nicely demonstrates\r\n\tthe script in action.<\/p>\r\n
The following interfaces, properties and functions are supported from DOM\r\n\t2 events:<\/p>\r\n
\r\n\t
Interface\r\n\t\t\t\tEventTarget<\/a><\/code><\/dt>\r\n\t\t
addEventListener<\/a><\/code><\/dd>\r\n\t\t
dispatchEvent<\/a><\/code><\/dd>\r\n\t\t
removeEventListener<\/a><\/code><\/dd>\r\n\r\n\t
Interface\r\n\t\t\t\tEventListener<\/a><\/code><\/dt>\r\n\t\t
handleEvent<\/a><\/code><\/dd>\r\n\r\n\t
Interface\r\n\t\t\t\tEvent<\/a><\/code><\/dt>\r\n\t\t
PhaseType<\/a><\/code> Constants (CAPTURE_PHASE<\/code>, AT_TARGET<\/code> and BUBBLE_PHASE<\/code>)<\/dd>\r\n\t\t
bubbles<\/a><\/code><\/dd>\r\n\t\t
cancelable<\/a><\/code><\/dd>\r\n\t\t
currentTarget<\/a><\/code><\/dd>\r\n\t\t
eventPhase<\/a><\/code><\/dd>\r\n\t\t
target<\/a><\/code><\/dd>\r\n\t\t
timeStamp<\/a><\/code><\/dd>\r\n\t\t
type<\/a><\/code><\/dd>\r\n\t\t
initEvent()<\/a><\/code> (not supported)<\/del><\/dd>\r\n\t\t
preventDefault()<\/a><\/code><\/dd>\r\n\t\t
stopPropagation()<\/a><\/code><\/dd>\r\n<\/dl>\r\n
Along with these event interfaces, there are a number of other interfaces\r\n\tI implemented including a fully conforming .getElementsByClassName() function,\r\n\tas defined in the Web Apps 1 for both the Document and Element interfaces,\r\n\ta prototype implementation of DOMTokenString() and many more, all availble\r\n\tin my DOM example script\r\n\trepositiory<\/a>.<\/p>\r\n","protected":false},"excerpt":{"rendered":"In response to the problems with Scott Andrew LePera\u2019s addEvent(), I’ve implemented a new cross-browser implementation of the DOM 2 Events interfaces.","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[13,4,7],"tags":[],"_links":{"self":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/posts\/83"}],"collection":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/comments?post=83"}],"version-history":[{"count":0,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/posts\/83\/revisions"}],"wp:attachment":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/media?parent=83"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/categories?post=83"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/tags?post=83"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}