Vivian Crap

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

 



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

 



• 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 IE Event Object as a Global Variable

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

currentTarget and relatedTarget/fromElement and toElement

          			var GENERIC = {
          				findCurrentTarget: function(event, node) {
          					var currentTarget;
          					if (window.event) // For IE
          						currentTarget = node;
          					else if (event && event.currentTarget) // For Firefox, Opera
          						currentTarget = event.currentTarget;
          					return currentTarget;
          				},
          				findRelatedTarget: function(event) {
          					var relatedTarget;
          					if (window.event) { // For IE
          						if (window.event.fromElement)
          							relatedTarget = window.event.fromElement;
          						else if (window.event.toElement)
          							relatedTarget = window.event.toElement;
          					} else if (event && event.relatedTarget) { // For Firefox, Opera
          						relatedTarget = event.relatedTarget;
          					}
          					return relatedTarget;
          				}
          			};
          		

Turn all capturing and bubbling off

					var GENERIC = {
						stopPropagation: function(event) {
							if (window.event) // For IE
								window.event.cancelBubble = true;
							if (event && event.stopPropagation) // For Modern Browsers
								event.stopPropagation();
						}
					};
				

Prevent Default Action

					var GENERIC = {
						cancelDefault: function(event) {
							if (window.event) // For IE
								window.event.returnValue = false;
							if (event && event.preventDefault) // For Modern Browsers
								event.preventDefault();
						}
					};
				

• Example One

          				// Add Event Handlers to The Element
          				element.onclick = doSomething;
          			

          				// Remove Event Handlers
          				element.onclick = null;
          			

• Example Two: attachEvent() and addEventListener()

          				// Add Event Handlers to The Element
          				if (element.attachEvent) { // For IE
          					element.attachEvent("onclick", doSomething);
          				} else if (element.addListener) { // For Modern Browsers
          					element.addEventListener("click", doSomething, false);
          				}
          			

          				// Remove Event Handlers
          				if (element.detachEvent) { // For IE
          					element.detachEvent("onclick", doSomething);
          				} else if (element.removeListener) { // For Modern Browsers
          					element.removeEventListener("click", doSomething, false);
          				}
          			

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

          				var GENERIC = {
          					// 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.
          					addEvent: function(obj, type, fn) {
          						if (!obj) return;
          						if (obj.attachEvent) { // For IE
          							obj["e"+type+fn] = fn;
          							obj[type+fn] = function(){obj["e"+type+fn](window.event);}
          							obj.attachEvent("on"+type, obj[type+fn]);
          						} else if (obj.addEventListener) { // For Modern Browsers
          							obj.addEventListener(type, fn, false);
          						}
          					},
          					removeEvent: function(obj, type, fn) {
          						if (!obj) return;
          						if (obj.detachEvent) { // For IE
          							obj["e"+type+fn] = fn;
          							obj[type+fn] = function(){obj["e"+type+fn](window.event);}
          							obj.detachEvent("on"+type, obj[type+fn]);
          						} else if (obj.removeEventListener) { // For Modern Browsers
          							obj.removeEventListener(type, fn, false);
          						}
          					}
          				};
          			

          				function changeBackground() {
          					this.style.backgroundColor = "#000"; // "this" refers to the element
          				}
          				GENERIC.addEvent(element, "click", changeBackground);
          				GENERIC.removeEvent(element, "click", changeBackground);
          			

• W3C Document Object Model Events
• The DOM Event Model
• Traditional Event Registration Model
• Advanced Event Registration Model
• Event Order