Basic JavaScript - Browser Events

This post corresponds to notes taken while reading Eloquent JavaScript.

Event handling is a powerfull tool that allows to execute some interesting actions after the occurrence of a given events. As JavaScript is single-threaded, only one event can be handled at time.
If no actions is registered for an event then this one is bubbled through the DOM tree. For example, if a user clik on a link and no event handler is registered for this then the event will be forwarded to the link parent (e.g. paragraph element) until document.body.
For handling events, someone should:

1. Register an event handler by setting an element's onclick (or onkeypress, etc.) property. If someone need more than one handler then use addEventListener function. This later needs boolean parameter to indicate event 'bubble' through the DOM tree as normal when false.
2. Get the event object than can be passed to the handler as a local variable 'event' or stored in the top-level variable window.event. This code event || window.event can be used to get the event object.
3. Extract information from the event object such as the source element that can be find in the srcElement or target event property, also the precise corrdinates of a click are available in clientX and clientY properties. pageX and pageY properties are usefull when the document is scrolled, document.body.scrollLeft and document.body.scrollTop tells how many in pixels the document has been scrolled.
4. Signal the event handling.

Example:

// register a handler for 'onclick' event
$('button').onclick = function() {console.log("Click !");};

$('button').addEventListener("click", function() {console.log("Click !");}, false);

// unregister a handler for 'onclick' event
$('button').removeEventListener("click", function() {console.log("Click !");}, false);

 Example of common events that can be registered for:

• load is a window event that fires when the document is fully loaded.
• onunload fires when leaving a page
• click/dbclick fires when user click or double click on an element
• mousedown, mouseup
• mousemove fires whenever the mouse moves while it is over a given element.
• mouseover and mouseout fires when the mouse enters or leaves a node/element.
• focus and blur are fired on elements that can be focused (e.g. input) when the element has focus or the focus leaves the element.
• change is fired when the node content changed (e.g. input).
• submit is a form event fired when the form is submitted.
• resize fired when window is resized.

The target or srcElement property points to which node the event is fired for, while relatedTarget or toElement or fromElement property gives which node the mouse came from.

Key related events:

• keydown and keyup are used when someone is interested in which key was pressed (e.g. arrow keys).
• keypress to be used when someone interested in the typed character.

The event property keyCode/charCode tells the code to identify the key (for mouseup) or character (for keypress). String.fromCharCode can be used to convert the charCode to a string. The properties shiftKey, ctrlKey and altKey tells whether the shift, control or alt key were held during the key/mouse event.

To control event bubble use stopPropagation (or 'cancelBubble' in IE) property.