javascript - setting events programmatically

Question

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 (var i = 1; i < numRows; i++) {
            var ID = table.rows[i].id;
            if (i % 2 == 0) {
                table.rows[i].className = "GridRow";
                table.rows[i].onmouseout = "GridRow";
            }
            else {
                table.rows[i].className = "GridRowAlt";
                table.rows[i].onmouseout = "GridRowAlt";
            }
        }

Answer 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 similar attachEvent:

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 elsewhere
function 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.