JavaScript/Notes/IBD: Difference between revisions
| Line 19: | Line 19: | ||
The DOM events interface has an additional parameter the capturing phase of the Event phase in <code>removeCallback</code>. | The DOM events interface has an additional parameter the capturing phase of the Event phase in <code>removeCallback</code>. | ||
==== DOM Events ==== | |||
DOM events interface also has special methods for working with DOM events, such as <code>getTarget</code>. However, this is a design smell. Those methods could be refactored to be hidden, and a custom adapted Event instance could be passed to the handler, much like jQuery's adapted event. | DOM events interface also has special methods for working with DOM events, such as <code>getTarget</code>. However, this is a design smell. Those methods could be refactored to be hidden, and a custom adapted Event instance could be passed to the handler, much like jQuery's adapted event. | ||
Revision as of 11:30, 1 November 2013
Interface Based Design
Using a common interface, different Event adapters are designed to handle different types of event registration:
- Event handler properties
- Event callback registration methods
Encapsulate the Parts that Vary
Event handler properties are useful for custom events and DOM events.
For DOM compatibility, it is often necessary to have methods that will handle old IE event model as well as delegate listeners (See: DOM Event Flow).
Common Interface
Each interface shares the following methods: <source lang="javascript"> get(src, sEvent); // Gets an event publisher. addCallback(src, sEvent, callback); removeCallback(o, type, cb[, useCapture); </source>
The DOM events interface has an additional parameter the capturing phase of the Event phase in removeCallback.
DOM Events
DOM events interface also has special methods for working with DOM events, such as getTarget. However, this is a design smell. Those methods could be refactored to be hidden, and a custom adapted Event instance could be passed to the handler, much like jQuery's adapted event.
Event Handler Properties
Each event is a property name. The value is a function or null. The pattern works equally well for custom events on user-defined objects and DOM events.
DOM Elements <source lang="javascript"> el["onclick"] = function(ev) {
alert(this);
};</source>
Custom Objects and Events <source lang="javascript"> userPicker.onuserselected= function(ev) {
console.log(ev.user + " chosen.");
}; </source>
Event Listener Interface
<source lang="javascript"> el.addEventListener("click", function(ev) {
alert("clicked");
}, false); </source>
Custom objects <source lang="javascript"> userPicker.addCallback("onuserselected", function(ev) {
console.log(ev.user + " chosen.");
}); </source>