Home > JavaScript > setAttribute and Dynamic Events

setAttribute and Dynamic Events

A common approach from a JavaScript newbie is to attach an event of an element through setAttribute function. I have always avoided using setAttribute function if that is possible as I preferred the dot notation based mode than using the function. Is it possible to attach events to elements through setAttribute? Yes it is possible.

var el = document.getElementById("container");
el.setAttribute("title", "Click to expand");
el.setAttribute("onclick", "test(1);");

From the above code the the developer wants to attach an onclick event to the element whose id is “container”. When the user clicks this element the developer wants to invoke test function and want to pass 1 as the parameter. This looks very straightforward.

Now we’ll check the code. For me the first browser is Firefox and you can see that if you click on the element mentioned above it execute the event handler correctly. Also you can find that this code works correctly in Apple Safari, Google Chrome, Opera, etc. Now comes testing in IE and within no time you can identify the issue the event that we attached through setAttribute function does not work.

We have to change our approach a bit to make this code work in IE.

var el = document.getElementById("container");
el.setAttribute("title", "Click to expand");
el.setAttribute("onclick", function(){
       test(1);
});

In the above code I have removed the quotes within which I’ve mentioned the function and used an anonymous function to invoke the event handler. I have used an anonymous function only because I want to pass some values to the event handler. If you don’t have any values to pass then you can use the following mode

var el = document.getElementById("container");
el.setAttribute("title", "Click to expand");
el.setAttribute("onclick", test);

It would be better if you avoid using setAttribute for setting the events and use DOM based methods for achieving this. Personally I use YUI framework and its excellent Event utlity for dealing with events.

Advertisements
Categories: JavaScript
  1. Zit Niet
    July 10, 2009 at 9:25 am

    Hi,

    Is there a way to attach dynamically build javascript that works in IE browser like:

    var ms=”Hello world”;
    attachOnClick(“test(“+ms+”)”);

    function attachOnClick(ev) {
    var el = document.getElementById(“container”);
    el.setAttribute(“onclick”, ev);
    }

    The problem here is that i don’t know upfront how the call will look like (var ms is assigned runtime from a datasource).
    Any help on this would be appreciated very much.

    Chau,
    Zit.

  2. jpvalappil
    July 13, 2009 at 3:57 am

    @ Zit Niet

    I have made some changes in your code. Find the below mentioned representations:

    (a)
    function attachOnClick(ev) {
    var el = document.getElementById("container");
    el.setAttribute("onclick", ev);
    };
    var ms="Hello world";
    attachOnClick(function(){
    test(ms);
    });

    (b)
    function attachOnClick(ev) {
    var el = document.getElementById("container");
    el.onclick = ev;
    }
    var ms="Hello world"
    attachOnClick(function(){
    test(ms);
    });

    The third implementation I’ve made it bit more generic in which attachOnClick will attach any events on any elements based on a provided ID.
    (c)
    function attachOnClick(evt, id, ev) {
    var el = document.getElementById(id);
    if(el){
    el[evt] = function(){
    ev();
    };
    }
    };
    var ms="Hello world";
    attachOnClick("onclick", "container", function(){
    test(ms);
    });

    The main difference that I’ve done in my implementations is to pass a function object instead of a string in your code. Note that the method described in (a) works only in IE as the Firefox and other browsers like IE, Apple, Chrome, etc works on the string based setAttribute event handler values like the way I’ve mentioned in my post.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: