Three ways of ataching to events with dojo. What exactly is the difference?
Posted
by Mark
on Stack Overflow
See other posts from Stack Overflow
or by Mark
Published on 2010-03-25T13:40:55Z
Indexed on
2010/03/25
13:43 UTC
Read the original article
Hit count: 461
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.
© Stack Overflow or respective owner