Setting Events Programmatically

I am setting the className of a table row in my code, is it possible to do something similiar to set an event on a row? This is along the lines of what I would like to do : for (v

Solution 1:

Yes, you can assign a function instance to the event handler that way:

table.rows[i].onmouseout = function() { ... };

Be careful doing that in loops, because you're creating a new function on every loop and the function closes over the data in scope (and so has an enduring reference to it, not a copy of it as of when the function was created; see this other recent question for more). But don't worry, closures are not complicated once you understand how they work.

In general, this is called "DOM0" event handling because it involves a method of attaching event handlers that was created prior to the first DOM specification. As of DOM2, there's a better way addEventListener:

table.rows[i].addEventListener('mouseout',function() { ... }, false);

It's "better" because you can have more than one event handler on the same event of the same element, whereas with the DOM0 mechanism, assigning a new event handler disconnects the previous one (if any).

On IE prior to IE9, sadly, addEventListener wasn't supported but it did have the very similarattachEvent:

table.rows[i].attachEvent('onmouseout',function() { ... });

Note the differences:

• addEventListener's event names don't have the "on" prefix
• addEventListener has one more param than attachEvent, which you almost always want to set false

---

Update:

All of the examples above are for inline anonymous functions, which is a bit unlike me, because I don't like anonymous functions. So just for clarity, from an events perspective, a function is a function. It can be a named function you declare elsewhere, or an inline anonymous function, whatever:

// Hook up...
table.rows[i].addEventListener('mouseout', handleRowMouseOut, false);

// Nice, reusable function defined elsewherefunction handleRowMouseOut(event) {
    // ...
}

---

Off-topic: It's these sorts of browser differences that lead me to geneerally recommend using a library like jQuery, Prototype, YUI, Closure, or any of several others. They smooth over differences for you as well as providing lots of handy utility functions.

Solution 2:

table.rows[i].onmouseout = "GridRow"; doesn't make a lot of sense, table.rows[i].onmouseout = function(){alert('hello');}; or some other valid script ought to work though.

Solution 3:

Why don't you just use jQuery or some other JavaScript framework? This way your code gets more simple.

var i = 0;

$('#some_table tr').each(function() {
  if (i % 2 == 0) {
    $(this).addClass('GridRow');
    $(this).mouseout(function(evt) { /* your GridRow function */ });
  } else {
    $(this).addClass('GridRowAlt');
    $(this).mouseout(function(evt) { /* your GridRowAlt function */ });
  }

  i++;
})

Sultan

Solution 4:

The original question is not to alert "GridRow". I'm quit sure GridRow is a function name. Fortunately each function is a child of window so write window["GridRow"].

I would add a well known bind-event function, because you need it quite often.

var bindEvent=function(elem,evt,func){
              if(elem.addEventListener){
                 elem.addEventListener(evt,func,false);
              }
              elseif(elem.attachEvent){
                      elem.attachEvent('on'+evt,function(){
                          func.call(event.srcElement,event); 
                       })
             }
};

and then:

bindEvent(table.rows[i],"mouseout",window["GridRow"]);