Tip Details Add a Related Tip

Rate as: Positive Negative

attaching events to nodes in Javascript

For you hard-core javascript junkies that attach your own nodes to the DOM, I recently ran into a problem with attaching events to the nodes I was generating. It would work fine in Firefox, but not in Internet Explorer. Here's the (psuedo) code that I was using

var newElement = document.createElement('input');
newElement.setAttribute('onclick', 'someFunction()');

Like I said, this worked fine in Firefox, but not in IE. I evenetually found out that IE does not support adding events through the setAttribute method. Instead, you need to use an IE-specific command called attachEvent instead. Since this command only exists in IE, the way I wrote the code so that it works in both IE and Firefox is like so

var newElement = document.createElement('input');
if ( newElement.attachEvent ) {
   // This code gets executed by IE
   newElement.attachEvent('onclick', someFunction);
} else {
   // Other (sane) browsers execute this code
   newElement.setAttribute('onclick', 'someFunction()');
}

The important thing to note about attachEvent is that you pass the actual function to it, not the name of the function as with setAtttribute. An additional thing to note is that attachEvent invokes calls as global function, so in the context of the function called this refers to the window object, not the object to which the event was attached like in setAttribute. Phew, IE sure makes this hard!
Rating: no ratings, 0 total Votes
Categories: javascript web programming internet explorer
Added: on Aug 18, 2008 at 11:23 am
Added By: an anonymous user

Comments on this Tip

Add a Comment
There are no comments for this tip
Your Comment:
(how to format)
Rate This Tip:

Verify Humanity:
Sorry, we know it's annoying, but please enter the characters shown in the image to the left so that we know you're an actual person and not an evil spammer. Thanks.
       

Related Tips

Static variables in Javascript

100% positive, 7 comments - last added 5 days, 8 hours ago
– Tip added by an anonymous user on Aug 03, 2007 at 4:19 pm

Telling when an iframe is done loading

100% positive, 1 comment - last added on Sep 07, 2008 at 10:57 pm
– Tip added by an anonymous user on Apr 18, 2008 at 8:05 am

Scrolling HTML elements using the keyboard

80% positive, 1 comment - last added on Jul 18, 2008 at 3:53 pm
– Tip added by rlansky on Jun 22, 2007 at 9:34 am

Length of associative arrays in Javascript

100% positive, 0 comments
– Tip added by an anonymous user on Nov 04, 2008 at 10:13 am

Optional parameters in javascript functions

100% positive, 0 comments
– Tip added by an anonymous user on Jul 30, 2008 at 10:44 am

Detecting if a variable exists in Javascript

100% positive, 1 comment - last added on Sep 03, 2008 at 6:12 am
– Tip added by an anonymous user on Jul 22, 2008 at 8:31 am

compressing javascript

100% positive, 0 comments
– Tip added by an anonymous user on Jun 12, 2008 at 3:02 pm

Javascript variable naming

100% positive, 1 comment - last added on Jul 22, 2008 at 8:33 am
– Tip added by an anonymous user on Sep 30, 2007 at 7:28 am

Creating vector graphics in javascript

100% positive, 0 comments
– Tip added by Marcos84 on May 10, 2007 at 2:44 pm

animating elements with jQuery

no ratings, 0 comments
– Tip added by an anonymous user on Aug 04, 2008 at 1:46 pm

Code for creating Javascript CSS charts

no ratings, 0 comments
– Tip added by an anonymous user on Aug 21, 2007 at 12:23 pm

Efficient building of large strings in Javascript

no ratings, 0 comments
– Tip added by an anonymous user on Aug 08, 2007 at 12:52 pm

Avoid invalid title names when opening javascript windows

no ratings, 0 comments
– Tip added by an anonymous user on Aug 07, 2007 at 9:36 am

Nice article on javascript techniques

no ratings, 0 comments
– Tip added by rlansky on Apr 24, 2007 at 8:12 am

Matching any character in a javascript regular expression

100% positive, 1 comment - last added on Oct 01, 2008 at 10:12 am
– Tip added by an anonymous user on Aug 18, 2008 at 9:06 am

Enabling right click on web pages

Categories: javascript web security
100% positive, 0 comments
– Tip added by an anonymous user on Jul 19, 2008 at 6:37 am

Debugging Javascript

100% positive, 0 comments
– Tip added by an anonymous user on Sep 12, 2008 at 2:35 pm

Viewing CSS and Javascript files

100% positive, 0 comments
– Tip added by an anonymous user on Aug 20, 2008 at 7:27 am

Random number generation

100% positive, 0 comments
– Tip added by an anonymous user on Aug 05, 2008 at 6:49 am

Creating charts in PHP

no ratings, 0 comments
– Tip added by an anonymous user 3 days ago