JavaScript/Notes/IBD: Difference between revisions
| Line 2: | Line 2: | ||
A formal contract is designed for the interfaces so that the client can choose which interface to use for a given task. | A formal contract is designed for the interfaces so that the client can choose which interface to use for a given task. | ||
Using a common <b>interface</b>, different Event <b>adapters</b> can be designed to handle different types of event registration: | Using a common <b>interface</b>, different Event <b>adapters</b> can be designed to handle different types of event registration: | ||
# event handler properties | |||
# DOM event registration mechanisms | |||
=== Events === | === Events === | ||
Revision as of 08:10, 1 November 2013
Interface Based Design
A formal contract is designed for the interfaces so that the client can choose which interface to use for a given task.
Using a common interface, different Event adapters can be designed to handle different types of event registration:
- event handler properties
- DOM event registration mechanisms
Events
An event is a notification that something has occurred.
Two ways to Register Events
- Event name as a property
- Event Listener Interface, and event registration mechanism on the object.
Event Name as a Property
Each event is a property name. The value is a function or null.
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>