page 2 of 4
Table Row Rollover
Using the Event Object with JavaScript
Before addressing solutions to the situation describe on the previous page, let's look at how event handlers (sometimes called event listeners) are bound to events. Binding is how the software "knows" to run a particular function for an event. We bound functions to the onmouseover and onmouseout events in the examples on the previous page.
There are three ways to bind handlers to events:
- In-line
- This is the oldest where the code is in the HTML
- <tag onmouseover="function_name(agruments);">content</tag>
- Assignment to an object's property
- Commonly seen as window.onload = function_name;
- Using a special function
-
- for IE
- target_element.attachEvent("onmouseover", function_name);
- for Mozilla/Firefox/Netscape; et al
- target_element.addEventListener("mouseover", funciton_name, false).
A full explanation of these binding methods belongs in another article. Here we need to understand just a few basics. In-line binding is the only method that allows parameters, and to access the event object in Gecko based browsers one formal parameter has to be "event". We'll saw this earlier. The other useful parameter is "this", a reference to the element, because "this" within a function bound in-line refers to the window and not the element. Functions bound with the other two methods have the element as their context. That means "this" refers to the element as needed. Also, in Gecko based browsers the event object is passed as a formal parameter.
Current Web design strategy attempts to separate content, display or appearance, and behavior. In-line binding goes against this strategy so you may want to give serious consideration to the other methods.
Refer to Using The Event Object for table cell rollover affects to get a little more detail on these techniques. This example is a quick take off from the in-line example on the previous page
As in the tutorial on table cell rollovers, an in-line binding example is shown and then an example binding to the element's property. Using functions is not significantly different than binding to a property accept the functions allow binding of multiple handlers.
In-line Event Binding
- Tested and worked on:
- Netscape 7.x +, Konqueror 3.0+, Mozilla 1.3.1, Mozilla 1.7 +, Opera 7.21, FireFox , IE 5.0, IE 5.5, and IE 6.0.28.
- Failed on:
- Opera 6.0.2.
This example show in-line event binding where the event handler relies on the event object. The CSS for this example is the same as the previous page.
| Column1 | Column2 | Column3 |
|---|---|---|
| Data 1.1 | Data 1.2 | Data 1.3 |
| Data 2.1 | Data 2.2 | Data 3.3 |
| Data 3.1 | Data 3.2 | Data 3.3 |
| Data 4.1 | Data 4.2 | Data 4.3 |
Here is the function to study.
<script type="text/javascript">
function mouse_event(e) {
e = e || event;
var obj = e.target || e.srcElement;
var tname = (obj.nodeType == 1) ? obj.tagName.toLowerCase() : '';
while (tname != 'tr' && tname != 'table') {
obj = obj.parentNode || obj.parentElement;
tname = obj.tagName.toLowerCase();
}
if (tname == 'tr') {
switch (e.type) {
case 'mouseover':
obj.className = 'hlt';
break;
case 'mouseout':
obj.className = "";
break;
}
}
}//eof mouse_event
</script>
The code is event based and uses a couple of shortcuts. This function is declared in the <head> section. It accepts one argument: an event object.
- A short cut assigns e the W3C event object if it is not null or the IE event object.
- Next obj is assigned a reference to the element that triggered the mouse event
- tname is assigned the tagName of the element that trigger the event unless it is not an element. Some browsers have a text node as the first element in the event chain.
- Next the event chain or path is followed looking for a TR element, but the loop stops if a TABLE tag is reached.
- If there is a TR, then action is taken depending on the type of event.
Now here the relevant part of the HTML:
<table onmouseover="mouse_event(event);" onmouseout="mouse_event(event);">
The table tag's onMouseOver and onMouseOut events are assigned the mouse_event function as the event handler with event as an argument. It achieves the results of the previous technique in the same way: changing the row's class.
The event handler can be placed in the table tag because events bubble up the DOM hierarchy. The event handler code determines if a row is in the event chain from the element where the event occurred to the element where the event is handled.
The function is generic enough to be highly reusable across a variety of HTML elements. And, it is very portable working on a wide variety of browsers without modification. The new styles and methods would have the event handler bound to the events using different techniques. This function is new method ready.
Binding the Handler to an Object Property
We have all the tools needed to use binding methods other than in-line. The CSS and the function mouse_event are unchanged for this next example. This shows, in part, the relative ease in switching to a design that separates behavior from content.
| Column1 | Column2 | Column3 |
|---|---|---|
| Data 1.1 | Data 1.2 | Data 1.3 |
| Data 2.1 | Data 2.2 | Data 3.3 |
| Data 3.1 | Data 3.2 | Data 3.3 |
| Data 4.1 | Data 4.2 | Data 4.3 |
The only change to make this work is using the window.onload event to run a script that bindings the handler to the events.
window.onload = function () {
document.getElementById("binding").onmouseover = mouse_event;
document.getElementById("binding").onmouseout = mouse_event;
};
The function mouse_event is bound to the table tag's events after the table has been created. An anonymous function was used to bind the binding script to the onload event. Using one of the functions for binding would work the same way.
The headers are protect from changing because the style is for TD and not TH. However, the event handlers could have been bound to the TBODY element with the column heading in a THEADER element and they would not have triggered the event handler.
