my version of the popular addEvent()
Ok, so here is my version of the popular addEvent() javascript function.
usage:
event_listener.add( object, event_type, function );
Example:
function init() {
alert("the page is fully loaded");
}
event_listener.add(window,"onload", init);
-OR -
event_listener.add(window, "onload", function init() {
alert("the page is fully loaded");
});
Then you can also remove events as well. Remove them in the same manner you created them. Like this:
event_listener.remove( object, event_type, function );
Example:
function init() {
alert("the page is fully loaded");
}
event_listener.remove(window,"onload", init);
-OR -
event_listener.remove(window, "onload", function init() {
alert("the page is fully loaded");
});
Ok, so here’s the code:
var event_listener = {
add: function(node, event_type, function_reference) {
node = $(node);
// if this is the first time an event has been added
// to this node, setup the event handling system
if(
typeof node[event_type] != ‘function’ ||
typeof node[event_type+'_num'] == ‘undefined’
) {
node[ event_type + '_num' ] = 0;
if( typeof node[event_type] == “function” ) {
node[event_type + 0] = node[event_type];
node[event_type + '_num']++;
}
// setup the actual event listener (onclick, onmouseover, etc…)
node[event_type] = function(e){
e = (e) ? e : window.event;
var return_value = true;
for(var i = 0; i < node[event_type + '_num']; i++) {
if( node[event_type + i](e) === false) {
return_value = false;
}
}
return return_value;
}
}
// prevent duplicates - return if the function is already there
for(var i = 0; i < node[event_type + '_num']; i++) {
if( node[event_type + i] == function_reference ) {
return false;
}
}
node[ event_type + node[ event_type + '_num' ] ] = function_reference;
node[ event_type + '_num' ]++;
return true;
},
remove: function(node, event_type, func) {
node = $(node);
// if the node is not setup for the event handling system, do nothing
if(
typeof node[event_type] != ‘function’ ||
typeof node[event_type + '_num'] == ‘undefined’ ||
node[event_type + '_num'] == 0
) {
return false;
}
// loop through functions. once target function is found, remove it. shift
// subsequent functions up one number (kindof like Array.splice(i,1); )
var found = false;
for( var i = 0; i < node[event_type + '_num']; i++ ){
if( !found ) {
found = node[event_type+i] == func ||
node[event_type+i].toString == func.toString;
}
if( found && ( i + 1 ) < node[event_type + '_num'] ) {
node[ event_type + i] = node[event_type + ( i + 1 )];
}
}
if(found) {
node[event_type + '_num']–;
return true;
}
}
};
Inspired by and/or based on the following:
Aaron Moore’s addEvent()
Dustin Diaz’s addEvent()
Pointers / References in JavaScript: a hack »
Comments
Comment from spudly
Time: January 24, 2008, 7:02 am
node = $(node) uses a javascript function named $() which will take either an Id or an actual HTMLElement and will always return an HTMLElement. This way you can pass in either the element or the element’s Id and it will work either way.
$() originally came from the prototype javascript framework (i think) but it is all over the internet now. Do a google search, you’ll find it. It’s really convenient.
If you don’t want to use that, feel free to delete that line. It won’t break anything as long as you’re passing in HTMLElement objects.
Comment from Floroskop
Time: March 18, 2008, 3:21 am
Hello!
I think this try.
Comment from royalbee
Time: May 1, 2008, 10:32 pm
nice
line 20 - you have “===” probably meant “==”
Comment from dingo
Time: January 23, 2008, 7:44 pm
what’s node = $(node); ?