/SubText/ImagesI cannot give the relevant author credit. I just want to clearly state that this is not something that I discovered, but it is an interesting technique so I wanted to blog about it. The downside of this approach is that it obfuscates the event wiring logic because most people won't look at the styles to find the logic.
It appears that IE will evaluate and execute a CSS expression even if the style property you are trying to set is invalid. So if you were to define the following CSS style and markup, it will hookup mouseover, mouseout and onclick event handlers for each TR within the table body and AlternatingRowsTable css class. This allows me to create a mouse rollover or "hover" effect on the TRs. Note how it is being applied to the completely bogus HookupEvent style attribute. I could have called it XYZ and it still would have wired up the events for me.
<style type="text/css"> .AlternatingRowsTable
tbody TR { HookupEvents:expression(this.onmouseover=new Function("this.style.background='lightyellow';"),
this.onmouseout =new Function("this.style.background='white';"), this.onclick=new
Function("alert('Hello')")); } </style>
<table class="AlternatingRowsTable" style="width:50%" ID="Table1"> <thead>
<tr> <th>Col
1</th>
</tr> </thead>
<tbody>
<tr> <td>Data</td>
</tr> <tr>
<td>Data</td>
</tr> </tbody>
</table>
And here is a demo of the technique (IE only): CssExpressionsEventHookup.htm