2009
Apr
26

The DOM Event Model Basic

Tags:

Event Flow

  • Javascript Event Handler

    Event Capturing

    Netscape maintained that the event on element1 takes place first. This is called event capturing. The event handler of element1 fires first, the event handler of element2 fires last.

  • Javascript Event Handler

    Event Bubbling

    Microsoft maintained that the event on element2 takes precedence. This is called event bubbling. The event handler of element2 fires first, the event handler of element1 fires last.

  • Javascript Eevent Handler

    W3C Event Model

    W3C has very sensibly decided to take a middle position in this struggle. Any event taking place in the W3C event model is first captured until it reaches the target element and then bubbles up again.

The Event Object

Property Name Description
type The type of event that occurred. The value of this property is the name of the event type and is the same string value that was used when registering the event handler (e.g., "click" or "mouseover").
target The node on which the event occurred, which may not be the same as currentTarget.
currentTarget The node on which the event is currently being processed. If the event is being processed during the capturing or bubbling phase of propagation, the value of this property is different from the value of the target property.
eventPhase A number that specifies what phase of event propagation is currently in process. The value of one of the constants Event.CAPTURING_PHASE, EVENT.AT_TARGET, or EVENT_BUBBLING_PHASE.
timeStamp A Date object that specifies when the event occurred.
bubbles A boolean that specifies whether this event (and events of this type) bubbles up the document tree.
cancelable A boolean that specifies whether the event has a default action associated with it that can be canceled with the preventDefault() method.
Method Name Description
stopPropagation() Any event handler can call stopPropagation() to prevent the event from being propagated beyond the node at which it is currently being handled.
preventDefault() Any event handler can call preventDefault() to prevent the browser from performing a default action associated with the event.
W3C Standard Internet Explorer Description
type type A string that specifies the type of event that occurred.
target srcElement The document element on which the event occurred.
currentTarget none Not applicable in IE.
eventPhase none Not applicable in IE.
timeStamp none Not applicable in IE.
stopPropagation() cancelBubble A boolean property that, when set to true, prevents the current event from bubbling any further up the element containment hierarchy.
preventDefault() returnValue A boolean property that can be set to false to prevent the browser from performing the default action associated with the event.

The IE Event Object as a Global Variable

Example 
  1. function onMouseDownHandler(event) {
  2.   var event = event || window.event; // IE stores events in window object.
  3. }
  4. element.onmousedown = onMouseDownHandler;

currentTarget and relatedTarget/fromElement and toElement

Example 
  1. var GENERIC = {
  2.   findCurrentTarget: function(event, node) {
  3.     var currentTarget;
  4.     if (window.event) { // For IE
  5.       currentTarget = node;
  6.     } else if (event && event.currentTarget) { // For Firefox, Opera
  7.       currentTarget = event.currentTarget;
  8.     }
  9.     return currentTarget;
  10.   },
  11.   findRelatedTarget: function(event) {
  12.     var relatedTarget;
  13.     if (window.event) { // For IE
  14.       if (window.event.type === "mouseover") {
  15.         relatedTarget = window.event.fromElement;
  16.       } else if (window.event.type === "mouseout") {
  17.         relatedTarget = window.event.toElement;
  18.       }
  19.     } else if (event && event.relatedTarget) { // For Firefox
  20.       relatedTarget = event.relatedTarget;
  21.     }
  22.     return relatedTarget;
  23.   }
  24. };

View Demo

Turn all capturing and bubbling off

Example 
  1. var GENERIC = {
  2.   stopPropagation: function(event) {
  3.     if (window.event) { // For IE
  4.       window.event.cancelBubble = true;
  5.     }
  6.     if (event && event.stopPropagation) { // For Firefox, Opera, Safari
  7.       event.stopPropagation();
  8.     }
  9.   }
  10. };

Prevent Default Action

Example 
  1. var GENERIC = {
  2.   cancelDefault: function(event) {
  3.     if (window.event) { // For IE
  4.       window.event.returnValue = false;
  5.     }
  6.     if (event && event.preventDefault) { // For Firefox, Opera, Safari
  7.       event.preventDefault();
  8.     }
  9.   }
  10. };

View Demo

Event Handler Registration

Example One

Example 
  1. // Add Event Handlers to The Element
  2. element.onclick = doSomething;
Example 
  1. // Remove Event Handlers
  2. element.onclick = null;

Example Two: attachEvent() and addEventListener()

Example 
  1. // Add Event Handlers to The Element
  2. if (element.attachEvent) { // For IE
  3.   element.attachEvent("onclick", doSomething);
  4. } else if (element.addListener) { // For Modern Browsers
  5.   element.addEventListener("click", doSomething, false);
  6. }
Example 
  1. // Remove Event Handlers
  2. if (element.detachEvent) { // For IE
  3.   element.detachEvent("onclick", doSomething);
  4. } else if (element.removeListener) { // For Modern Browsers
  5.   element.removeEventListener("click", doSomething, false);
  6. }

attachEvent() and the this keyword

Event handlers registered with attachEvent() are invoked as global functions instead of as methods of the element on which they are registered. This means that the this keyword refers to the global window object. It is compounded, however, by the fact that the IE event object has no equivalent to the DOM currentTarget property. srcElement specifies the element that generated the event, but if the event has bubbled, this may be different from the element that is handling the event.

Arguments to addEventListener()

The final argument to addEventListener() is a boolean value. If true, the specified event handler captures events during the capturing phase of event propagation. If the argument is false, the event handler is a normal event handler and is triggered when the event directly on the object or on a descendant of the element and subsequently bubbles up to the element.

addEventListener() and the this keyword

When a function is registered as an event handler for a document element, it becomes a method of that document element. When the event handler is invoked, it is invoked as a method of the element, and, within the function, the this keyword refers to the element on which the event occurred.

Example Three: Register Objects as Event Handlers

Example 
  1. var GENERIC = {
  2.   // Fix the bug the "this" keyword refers to the global window object when event handlers registered with attachEvent() are invoked as global functions instead of as methods of the element on which they are registered.
  3.   addEvent: function(obj, type, fn) {
  4.     if (!obj) {
  5.       return;
  6.     }
  7.     if (type === "mousewheel" && navigator.userAgent.match("Gecko/")) {
  8.       type = "DOMMouseScroll";
  9.     }
  10.     // Fix the bug the "this" keyword refers to the global window object when event handlers registered with attachEvent() are invoked as global functions instead of as methods of the element on which they are registered.
  11.     if (obj.attachEvent) { // For IE.
  12.       obj["e"+type+fn] = fn;
  13.       obj[type+fn] = function() {
  14.           obj["e"+type+fn]( window.event );
  15.       }
  16.       obj.attachEvent("on"+type, obj[type+fn]);
  17.     } else if (obj.addEventListener) { // For Firefox, Opera, Safari
  18.       obj.addEventListener(type, fn, false);
  19.     }
  20.   },
  21.   removeEvent: function(obj, type, fn) {
  22.     if (!obj) {
  23.       return;
  24.     }
  25.     if (obj.detachEvent) { // For IE
  26.       obj.detachEvent("on"+type, obj[type+fn]);
  27.       obj[type+fn] = null;
  28.     } else if (obj.addEventListener) { // For Firefox, Opera, Safari
  29.       obj.removeEventListener(type, fn, false);
  30.     }
  31.   }
  32. };
Example 
  1. function changeBackground() {
  2.   this.style.backgroundColor = "#000"; // "this" refers to the element
  3. }
  4. GENERIC.addEvent(element, "click", changeBackground);
  5. GENERIC.removeEvent(element, "click", changeBackground);

Related Posts

This post was last modified by Lingi Huang


回應 (Leave a comment)

JavaScript 相關

Web Development 相關

類別 JavaScript

Copyright © 2014 LINGIHUANG.COM. All rights reserved.