Sunday, July 29, 2007

addEvent of Javascript


<script type="text/javascript" charset="utf-8">
// written by Dean Edwards, 2005
// with input from Tino Zijdel, Matthias Miller, Diego Perini

// http://dean.edwards.name/weblog/2005/10/add-event/

function addEvent(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false); // copy handler function.
} else {
// assign each event handler a unique ID
if (!handler.$$guid) handler.$$guid = addEvent.guid++;
// create a hash table of event types for the element
if (!element.events) element.events = {};
// create a hash table of event handlers for each element/event pair
var handlers = element.events[type];
if (!handlers) {
handlers = element.events[type] = {};
// store the existing event handler (if there is one, else this value is 'undefined')
if (element["on" + type]) {
//alert('exist on' + type + ' handler! copy existing event handler to handlers[0]');
handlers[0] = element["on" + type];
}
}
// store the event handler in the hash table
handlers[handler.$$guid] = handler;
// assign a global event handler to do all the work
element["on" + type] = handleEvent;
}
};
// a counter used to create unique IDs, Static variable: addEvent.guid
addEvent.guid = 1;

function removeEvent(element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else {
// delete the event handler from the hash table
if (element.events && element.events[type]) {
delete element.events[type][handler.$$guid];
}
}
};

function handleEvent(event) {
var returnValue = true;
// grab the event object (IE uses a global event object)
event = event || fixEvent(((this.ownerDocument || this.document || this).parentWindow || window).event);
// get a reference to the hash table of event handlers
var handlers = this.events[event.type];
// execute each event handler
for (var i in handlers) {
this.$$handleEvent = handlers[i];
if (this.$$handleEvent(event) === false) {
returnValue = false;
}
}
return returnValue;
};

function fixEvent(event) {
// add W3C standard event methods, IE has not those methods
event.preventDefault = fixEvent.preventDefault;
event.stopPropagation = fixEvent.stopPropagation;
return event;
};
fixEvent.preventDefault = function() {
this.returnValue = false;
};
fixEvent.stopPropagation = function() {
this.cancelBubble = true;
};

// This little snippet fixes the problem that the onload attribute on the body-element will overwrite
// previous attached events on the window object for the onload event
if (!window.addEventListener) {
document.onreadystatechange = function() {
if (window.onload && window.onload != handleEvent) {
addEvent(window, 'load', window.onload);
window.onload = handleEvent;
}
}
}
</script>

<a href="http://www.baidu.com" id="a1"> baidu </a>

<script type="text/javascript" charset="utf-8">
var a1 = $('a1');
var handler = function (e) {
alert('handler:' + e.type);
Event.stop(e);
};
var otherHandler = function (e) {
alert('otherHandler: ' + e.type + e.eventPhase);
Event.stop(e);
};
var handlerSelf = function (event) {
alert('too much recursion');
//a1.onmouseover(event);
}
a1.onmouseover = handlerSelf; // this handler will override by addEvent function.
addEvent(a1, 'mouseover', handler); // addEvent.guid = 1(handler), element.events['mouseover'][0] = element['on' + 'mouseover'] = handlerSelf, element.events['mouseover'][1] = handler
addEvent(a1, 'click', handler); // addEvent.guid = 1(handler), element.events['click'][1] = handler
addEvent(a1, 'click', otherHandler); // addEvent.guid = 2(otherHandler), element.events['click'][2] = otherHandler

/*
var evts = ("blur,focus,load,resize,scroll,unload,click,dblclick," +
"mousedown,mouseup,mousemove,mouseover,mouseout,change,select," +
"submit,keydown,keypress,keyup,error").split(",");
evts.each(function (e) {
Element.prototype[e] = function (callback) {
addEvent(this, e, callback);
};
});

var handler = function (evt) {
alert(evt.type + ': ' + evt.eventPhase);
Event.stop(evt);
return false;
};

a1['mouseover'](handler);
removeEvent(a1, 'mouseover', handler); // won't alert evt.type, unless comment this line.

a1.click(handler); // alert evt.type
*/
</script>

No comments :