Three ways of ataching to events with dojo. What exactly is the difference?
- by Mark
Is the difference here just various syntactical sugars or is there a reason to use one approach over the other? They all work, and to be a little more confusing what is the difference between this and evt.currentTarget?
the CSS
#reportDetails table tr:hover td,
#reportDetails table tr.hover td {
background: #aae4e2;
color: #333333;
}
Sample html
<div id="reportDetails">
<table>
<tr>
<td> something</td>
<td> soemthing else</td>
</tr>
<tr>
<td> something2</td>
<td> soemthing else2</td>
</tr>
</table>
</div>
dojo.behavior script
dojo.require("dojo.behavior");
if (dojo.isIE <= 6) {
dojo.behavior.add({
'#reportDetails tr': {
onmouseover: function(evt){ dojo.addClass(evt.currentTarget, "hover");},
onmouseout: function(evt){dojo.removeClass(evt.currentTarget, "hover");
}
}
});
}
dojo.behavior.apply();
dojo.query forEach script
if (dojo.isIE <= 6) {
dojo.addOnLoad(function() {
dojo.query("tr", "reportDetails").forEach(function(node){
node.onmouseover=function(){dojo.addClass(node,"hover");}
node.onmouseout=function() {dojo.removeClass(node,"hover");}
}
});
});
}
dojo.query ataching straight to the events
if (dojo.isIE <= 6) {
dojo.addOnLoad(function(){
dojo.query("tr", "reportDetails")
.onmouseover(function(evt){dojo.addClass(evt.currentTarget, "hover");})
.onmouseout(function(evt){dojo.removeClass(evt.currentTarget, "hover");});
});
}
I am assuming that evt.currentTarget and node could all be replaced with this and still work. I believe there is no real difference between 2 and 3 but the first one might actually use a different approach.
