JavaScript/Notes/IBD: Difference between revisions

From Noisebridge
Jump to navigation Jump to search
 
(13 intermediate revisions by 2 users not shown)
Line 1: Line 1:
== Interface Based Design ==
== Interface Based Design ==
Using a common <b>interface</b>, different Event registries handle different types of event registration:  
Using a common <b>interface</b>, different Event registries handle different types of event registration:  
# Event handler properties
# Event handler properties. Browser agnostic.
# Event callback registration methods
# Dom Event callback registration methods, considering delegation, IE event model, browser anomalies.
 
'''Source:''' https://github.com/GarrettS/EventPublisher
 
The implementation can be swapped out as needed for any given scenario or context, without having to try to accommodate every conceivable situation in one monolithic class.


==== DOM Events ====
==== DOM Events ====
DOM events need an adapter for addressing the great difference in old IE's event model, with <code>attachEvent</code> and getting an event's <code>target</code>.
DOM events need an adapter for addressing the great difference in old IE's event model, with <code>attachEvent</code>, getting a event properties such as <code>target</code>, and, <code>relatedTarget</code>, and addressing delegate listeners (See: [http://www.w3.org/TR/DOM-Level-3-Events/#event-flow DOM Event Flow]).
 
==== Custom Events ====
==== Custom Events ====
Custom Events are user defined so do not need any adapter.
Custom Events are user defined so do not need any adapter. Custom do not need "on" conditionally prefixed to the event name, however DOM Event handler properties do, e.g.
<source lang="javascript">
EventPublisher.get(document, "onclick");
</source>
 
The custom registry does not try to normalize the event, either. This can be a problem when this registry is used for DOM 0 Event handlers.
 
In that situation, the client can access the static adapter methods <code>DomEventPublisher.getTarget(ev)</code> and <code>DomEventPublisher.getRelatedTarget(ev)</code>.


===Encapsulate the Parts that Vary===
===Encapsulate the Parts that Vary===
Event handler properties are useful for custom events and DOM events.  
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: [http://www.w3.org/TR/DOM-Level-3-Events/#event-flow DOM Event Flow]).
For DOM compatibility, it is often necessary to have methods that will handle old IE event model or work with delegate listeners (See: [http://www.w3.org/TR/DOM-Level-3-Events/#event-flow DOM Event Flow]).


=== Common Interface ===  
=== Common Interface ===  
Line 20: Line 32:
get(src, sEvent); // Gets an event publisher.
get(src, sEvent); // Gets an event publisher.
addCallback(src, sEvent, callback);
addCallback(src, sEvent, callback);
removeCallback(o, type, cb[, useCapture);
removeCallback(o, type, cb); // useCapture for DOM.


// Instance:
// Instance:
''EventPublisher''.addCallback(sEvent, callback);
eventPublisher.addCallback(sEvent, callback);
''EventPublisher''.removeCallback(sEvent, callback);
eventPublisher.removeCallback(sEvent, callback);
</source>
</source>


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, `useCapture` for the capturing phase of the Event phase in <code>removeCallback</code>, used internally.


==== Event Handler Properties ====
==== Event Handler Properties ====
Line 40: Line 52:
Custom Objects and Events
Custom Objects and Events
<source lang="javascript">
<source lang="javascript">
userPicker.onuserselected= function(ev) {
userPicker.onuserselected = function(ev) {
   console.log(ev.user + " chosen.");
   console.log(ev.user + " chosen.");
};
};

Latest revision as of 18:09, 6 January 2014

Interface Based Design[edit]

Using a common interface, different Event registries handle different types of event registration:

  1. Event handler properties. Browser agnostic.
  2. Dom Event callback registration methods, considering delegation, IE event model, browser anomalies.

Source: https://github.com/GarrettS/EventPublisher

The implementation can be swapped out as needed for any given scenario or context, without having to try to accommodate every conceivable situation in one monolithic class.

DOM Events[edit]

DOM events need an adapter for addressing the great difference in old IE's event model, with attachEvent, getting a event properties such as target, and, relatedTarget, and addressing delegate listeners (See: DOM Event Flow).

Custom Events[edit]

Custom Events are user defined so do not need any adapter. Custom do not need "on" conditionally prefixed to the event name, however DOM Event handler properties do, e.g. <source lang="javascript"> EventPublisher.get(document, "onclick"); </source>

The custom registry does not try to normalize the event, either. This can be a problem when this registry is used for DOM 0 Event handlers.

In that situation, the client can access the static adapter methods DomEventPublisher.getTarget(ev) and DomEventPublisher.getRelatedTarget(ev).

Encapsulate the Parts that Vary[edit]

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 or work with delegate listeners (See: DOM Event Flow).

Common Interface[edit]

Each interface shares the following methods: <source lang="javascript"> // Static: get(src, sEvent); // Gets an event publisher. addCallback(src, sEvent, callback); removeCallback(o, type, cb); // useCapture for DOM.

// Instance: eventPublisher.addCallback(sEvent, callback); eventPublisher.removeCallback(sEvent, callback); </source>

The DOM events interface has an additional parameter, `useCapture` for the capturing phase of the Event phase in removeCallback, used internally.

Event Handler Properties[edit]

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[edit]

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