Flexible Javascript Events

September 8th, 2005

This is the project page for my entry into the addEvent() recoding contest. It works in all of the modern browsers: Windows IE 5+, Mozilla, Opera, and Safari. The code meets every item outlined in the guideline - attempting to be as short and simple as possible. You can view a demo of it in action.

This library consists of two functions: addEvent and removeEvent. To use them, simply copy the code from below, paste it into your Javascript code, and call it using these methods:

addEvent( object, eventType, function );

The 'object' parameter should be the object upon which you want the event to be called.
The 'eventType' parameter should hold the name of the event, for example: 'click', 'mouseover', 'load', 'submit', etc. More can be found here.
The 'function' parameter should be a reference to a function that you wish to have called whenever the event fires. One parameter will be passed to 'function' - the event object.

Some examples of addEvent in use:

addEvent( document.getElementById('foo'), 'click', doSomething );
addEvent( obj, 'mouseover', function(){ alert('hello!'); } );

removeEvent( object, eventType, function );

removeEvent is virtually identical to addEvent, with the obvious difference: Instead of the function being added to the event handler, it is removed instead. All of the above code and parameters applies to this function.

The code, itself, is very short and simple - only 15 lines long:

Much of the above code is trying to fix a serious problem with Internet Explorer. The code has to be this troublesome due to the fact that when your attached function gets fired, the 'this' reference refers to the worthless 'window', when, in fact, it should refer to the parent object. An explanation of the key points:

obj['e'+type+fn] = fn;

This makes the function a child of the specified object. The key, which is placed in the object hash, is (hopefully) unique and won't collide with any other function additions.

obj[type+fn] = function(){ obj['e'+type+fn]( window.event ); }

This line creates an anonymous function who, once executed, will fire the previously attached function - passing it the global event object. This whole function is being attached to the object so that it can be removed later, using the removeEvent() function.

Finally, for more information on the attachEvent, detachEvent, addEventListener, and removeEventListener functions - please refer to the excellent resource at Quirksmode.

If you have any additional questions concerning the above code, please feel free to ask.

Tags: javascript, event, programming, popular

68 Comments on 'Flexible Javascript Events'

Date Extraction

March 28th, 2005

At the last Social Computing Club meeting an interesting idea came up for discussion. We were trying to figure out what the easiest possible way to schedule an event could be. But in order to do so, we needed to figure out where people got their event notifications from, so I've compiled a mini-list.

• Email - A lot of people plan new events by email. Some of these even do it by attaching a new ical event to the email for the recipients to add to their calendar. Attaching an event is the most efficient way for the recipients to manage the event, not necessarily so for the sender. The proposed solution, by Jon Schull, was to simply forward the email that you received with a subject line of "Tomorrow at 8, Meeting with Fred" (for example)to a specified email box. This will automatically update your calendar with this event and attach the email as data. This is would be very easy.
• Instant Messenger - I, personally, plan a lot of events through AIM. Similar to the email solution, one could simply forward a new event to an AIM bot. An issue with this, however, lies in the fact that you don't have the prior conversation automatically attached to the event (for context).
• Web Sites - Browsing around web sites and spotting a new event (such as 'FooBar Concert, 8pm, July 1, 2005') is the final location, that I can think of, where an event would exist. To test this theory, I wrote a quick GreaseMonkey hack which parses through some selected text, looks for something representing a date, and returns the date in a properly-formatted time (you can check it out here). Note: It doesn't actually do anything yet, but hopefully will soon. It currently only supports phrases like 'tomorrow', 'yesterday', 'evening', and 'morning' - which are much much easier to find then all the possible date formats.

In all, it's an intriguing problem: Constructing some form of an interface through which users can most easily maintain their calendar. At least one feature that I would find to be intriguing would be if someone says to you "Are you available tomorrow evening?" your calendar application would be able to tell you what time to meet would be best. and maybe even what location? Anyway, it's all just a bunch of speculation right now, but the Lab for Social Computing is going to try hacking on it and see if they can take it somewhere. I'll be interested to see what the results look like.

Tags: date, event, greasemonkey, planning, schedule, time

Comment on 'Date Extraction'