- Event Capturing
- Event Bubbling
- W3C Event Model
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.
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 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 IEwindow.event.cancelBubble = true;if (event && event.stopPropagation) // For Modern Browsersevent.stopPropagation();}};
Prevent Default Action
var GENERIC = {cancelDefault: function(event) {if (window.event) // For IEwindow.event.returnValue = false;if (event && event.preventDefault) // For Modern Browsersevent.preventDefault();}};
- Example One
// Add Event Handlers to The Element
element.onclick = doSomething;
// Remove Event Handlers
element.onclick = null;
// 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.
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);
you should also think on how you dose these colors. Try using them in the right proportions. For example, use the lighter color for the bigger areas like the background and the most vibrant color on the items where you want to attract the attention to, like the logo or title. The middle colors can be used for the text and other items.
So what makes you have ‘good taste’ in colors? Tastes differ, we all have different meanings of what is attractive and what isn’t. Yet still, the world would be unbearable if there wasn’t some general agreement. Luckily, by following these simple guidelines, you’ll have a better chance of achieving the optimal result. If you get stuck, you might find Adam Polselli’s Get The Look a nice source of inspiration on the latest color trends and styles.
