Javascript Base Libraries
jQuery, Prototype, Sizzle
Of these all, only jQuery seems to do a browser feature detect.
The Yahoo user interface (YUI) library provides a local storage mechanism to get rid of cookies.
- Firefox 3.5+, Google Chrome 4+, Safari 4+, IE8, Opera 10.5+: HTML5 localStorage; these modern browsers all support the core localStorage functionality defined in the HTML5 draft.
- Firefox 2.x and 3.0.x: Gecko globalStorage, an early API similar to HTML5's localStorage.
- Safari 3.1 and 3.2: HTML5 Database Storage, because Safari 3.1 and 3.2 don't support HTML5 localStorage.
- IE6, IE7: userData persistence, a rarely used IE feature for associating string data with an element on a web page and persisting it between pageviews.
A sample of code:
<script src="http://yui.yahooapis.com/3.1.0/build/yui/yui-min.js"></script>
YUI({
//Last Gallery Build of this module
gallery: 'gallery-2010.02.22-22'
}).use('gallery-storage-lite', function (Y) {
// For full compatibility with IE 6-7 and Safari 3.x, you should listen for
// the storage-lite:ready event before making storage calls. If you're not
// targeting those browsers, you can safely ignore this step.
Y.StorageLite.on('storage-lite:ready', function () {
// To store an item, pass a key and a value (both strings) to setItem().
Y.StorageLite.setItem('kittens', 'fluffy and cute');
// If you set the optional third parameter to true, you can use any
// serializable object as the value and it will automatically be stored
// as a JSON string.
Y.StorageLite.setItem('pies', ['apple', 'pumpkin', 'pecan'], true);
// To retrieve an item, pass the key to getItem().
Y.StorageLite.getItem('kittens'); // => 'fluffy and cute'
// To retrieve and automatically parse a JSON value, set the optional
// second parameter to true.
Y.StorageLite.getItem('pies', true); // => ['apple', 'pumpkin', 'pecan']
// The length() method returns a count of how many items are currently
// stored.
Y.StorageLite.length(); // => 2
// To remove a single item, pass its key to removeItem().
Y.StorageLite.removeItem('kittens');
// To remove all items in storage, call clear().
Y.StorageLite.clear();
});
});
Javascript Frameworks
Dojo, Qooxdo, ExtJs, MooTools, YUI
Echo3, Google Web Toolkit, Pyjamas, Rialto Toolkit, Rico, ZK
Of these all, only Rico supports IE55, only Yui and Dojo require at least FF3.
Javascript Class Internals
Prototype Extension
Well-known Javascript Libraries often extend base classes, such as Array, Element or String, by custom handy functions or by wrapper functions making older browsers more compatible to new standards.
But Element.prototype cannot be modified on IE6 as the Element class does not even exists, everything other than testing typeof(Element)=='object' throws an exception. The window object in some browsers provides two properties, "Element_prototypable":number=1 and "String_prototypable":number=1.
Event Firing
List of events as defined by the W3C level 3 specification in order of occurance:
DOM interface | type | Must be Sync | canBubble | cancelable | trusted for targets | Default Action |
Event | abort | Yes | No | No | E* | none |
| error | No | No | No | E* | none |
| load | No | No | No | dV* D* E* | none |
| select | Yes | Yes | No | E* | none |
| unload | Yes | No | No | dV* D* E* | none |
==== | ==== |
KeyboardEvent | keydown | Yes | Yes | Yes | E* | Varies |
(KeyboardEvent::)CompositionEvent | compositionstart | Yes | Yes | Yes | E* | Continue with composition |
| compositionupdate | Yes | Yes | No | E* | none |
KeyboardEvent | keypress | Yes | Yes | Yes | E* | Varies |
(KeyboardEvent::)CompositionEvent | compositionend | Yes | Yes | No | E* | none |
(KeyboardEvent::)TextEvent | textInput | Yes | Yes | Yes | E* | none |
KeyboardEvent | keyup | Yes | Yes | Yes | E* | none |
==== | ==== |
MouseEvent | mousemove | Yes | Yes | Yes | E* | none |
| mouseover | Yes | Yes | Yes | E* | none |
| mouseenter | Yes | No | No | E* | none |
| mousedown | Yes | Yes | Yes | E* | none |
| mouseup | Yes | Yes | Yes | E* | none |
| click | Yes | Yes | Yes | E* | Fire DOMActivate event |
| dblclick | Yes | Yes | No | E* | none |
| mouseout | Yes | Yes | Yes | E* | none |
| mouseleave | Yes | No | No | E* | none |
MouseEvent::WheelEvent | wheel | No | Yes | Yes | dV* D* E* | Scroll or zoom document |
(MouseEvent::)UIEvent | DOMActivate | Yes | Yes | Yes | E* | none |
| resize | Yes | No | No | dV* D* | none |
| scroll | No | No / Yes | No | dV* D* E* | none |
==== | ==== |
FocusEvent | blur | Yes | No | No | E* | none |
| DOMFocusIn | Yes | Yes | No | E* | none |
| DOMFocusOut | Yes | Yes | No | E* | none |
| focus | Yes | No | No | E* | none |
| focusin | Yes | Yes | No | E* | none |
| focusout | Yes | Yes | No | E* | none |
==== | ==== |
MutationEvent | DOMAttrModified | Yes | Yes | No | E* | none |
| DOMCharacterDataModified | Yes | Yes | No | T* C* CDATASection PI* | none |
| DOMNodeInserted | Yes | Yes | No | E* Attr Text C* CDATASection DT* ER* PI* | none |
| DOMNodeInsertedIntoDocument | Yes | No | No | E* Attr Text C* CDATASection DT* ER* PI* | none |
| DOMNodeRemoved | Yes | Yes | No | E* Attr Text C* CDATASection DT* ER* PI* | none |
| DOMNodeRemovedFromDocument | Yes | No | No | E* Attr Text C* CDATASection DT* ER* PI* | none |
| DOMSubtreeModified | Yes | Yes | No | dV* D* DF* E* Attr | none |
MouseEvent::MutationNameEvent | DOMAttributeNameChanged | Yes | Yes | No | E* | none |
| DOMElementNameChanged | Yes | Yes | No | E* | none |
short hands used for target types:
C* Comment, D* Document, DF* DocumentFragment, DT* DocumentType, dV* defaultView, E* Element, ER* EntityReference, PI* ProcessingInstruction, T* Text
For writing routines that call event handlers on event occurrences, here are some browser differences for the event object instance which is being generated for each event:
State members of the Event Object: | Annotation, Browser ---> | CR | FF | IE | OP |
cancelBubble:boolean | default:false | OK | | OK | OK |
stopPropagarion() | | | OK | | OK |
stopImmediatePropagation() | new in DOM level 3 spec |
returnValue:boolean | | default:true | | default:undefined |
preventDefault() | | | OK | | OK |
defaultPrevented:boolean | default:false | OK | | |
getPreventDefault() | | | OK | |
Informal members: |
bubbles:boolean | | OK | OK | | OK |
cancelable:boolean | | OK | OK | | OK |
detail:number | | | OK | | OK |
eventPhase:number | CAPTURING_PHASE=1 AT_TARGET=2 BUBBLING_PHASE=3 | OK | OK | | OK |
reason:number | | | | OK |
timeStamp | | :date | :number | | zero |
trusted:boolean | false, if the event was fired (simulated) by a script |
type:string | name of event, example: mouse wheel | "mousewheel" | "DOMMouseScroll" or "MozMousePixelScroll" | "mousewheel" | "mousewheel" |
Reference members: |
currentTarget:object | | OK | OK |
fromElement:object | | | | OK or null |
originalTarget:object | | | OK |
relatedTarget:object | for mouse events | | OK | | OK |
srcElement:object | | OK | | OK | OK |
target:object | | OK | OK | | OK |
toElement:object | | | | OK or null |
view:object | | OK | OK | | OK |
==== | ==== |
Keyboard and Text members: |
char:string |
charCode:number | | OK | | |
data:string | text being input |
getModifierState():string | combination of: 'Alt', 'AltGraph', 'CapsLock', 'Control', 'Fn', 'Meta', 'NumLock', 'Scroll', 'Shift', and 'Win' |
inputMethod:number | DOM_INPUT_METHOD_UNKNOWN=0 DOM_INPUT_METHOD_KEYBOARD=1 DOM_INPUT_METHOD_PASTE=2 DOM_INPUT_METHOD_DROP=3 DOM_INPUT_METHOD_IME=4 DOM_INPUT_METHOD_OPTION=5 DOM_INPUT_METHOD_HANDWRITING=6 DOM_INPUT_METHOD_VOICE=7 DOM_INPUT_METHOD_MULTIMODAL=8 DOM_INPUT_METHOD_SCRIPT=9 |
isChar:boolean | | | OK | |
key:string |
keyCode:number | for keyboard events | OK | | OK | OK |
location:number | DOM_KEY_LOCATION_STANDARD=0 DOM_KEY_LOCATION_LEFT=1 DOM_KEY_LOCATION_RIGHT=2 DOM_KEY_LOCATION_NUMPAD=3 DOM_KEY_LOCATION_MOBILE=4 DOM_KEY_LOCATION_JOYSTICK=5 |
repeat:boolean | | | | OK |
shift/ctrl/alt/metaKey:boolean | | OK | OK | OK | OK |
shift/ctrl/altLeft:boolean | | | | OK |
which:number | the key-code (for keydown events) or ascii-code (for keypress events) | OK | OK | | OK |
Mouse and Wheel members: |
axis:number | for wheel events, HORIZONTAL_AXIS=1 VERTICAL_AXIS=2 tabular=3 | | OK | |
button:number | mouse_left=0 mouse_right=2 mouse_middle=1 | OK | OK | L=1, R=2, M=4 | OK |
buttons:number | mouse_none=0 mouse_pri=1 mouse_sec=2 mouse_aux=4 |
x/y | | OK | | OK | OK |
clientX/Y | | OK | OK | OK | OK |
deltaMode | DOM_DELTA_PIXEL=0 DOM_DELTA_LINE=1 DOM_DELTA_PAGE=2 | | | |
deltaX/Y/Z | pos. value to scroll | | | |
detail | unstructured data | zero | pos. lines to scroll | | pos. lines to scroll |
layerX/Y | | OK | | |
offsetX/Y | | OK | | | OK |
pageX/Y | | OK | OK | | OK |
screenX/Y | | OK | OK | OK | OK |
wheelDelta | neg. 1/40 lines to scroll | OK | | OK (6+) | OK |
wheelDeltaX/Y | neg. 1/40 lines to scroll | OK | | |
which:number | mouse_left=1 mouse_right=3 mouse_middle=2 | OK | OK | -- | OK |
Focus and Form members: |
Text members: |
contentOverflow:boolean | | | | OK |
clipboardData:unknown | | OK or undefined |
dataTransfer:unknown | | | | OK or null |
rangeParent:object | | | OK | |
rangeOffset:number | | | OK | |
Mutation members: |
attrChange:number | MODIFICATION=1 ADDITION=2 REMOVAL=3 |
attrName:string |
newValue:string |
prevValue:string |
Proprietary members: |
behaviorCookie:number | | | | OK |
behaviorPart:number | | | | OK |
bookmarks:unknown | | | | OR or null |
boundElements:object[] | | | | OK |
dataFld:string | | | | OK or empty |
nextPage:string | | | | OK or empty |
propertyName:string | | | | OK or empty |
qualifier:string | | | | OK or empty |
srcFilter:unknown | | | | OR or null |
srcUrn:string | | | | OK or empty |
Members in bold are contained in the W3C spec.
Members of the EventException Object: | Annotation, Browser ---> | CR | FF | IE | OP |
code:number | UNSPECIFIED_EVENT_TYPE_ERR=0 DISPATCH_REQUEST_ERR=1 |