Three ways of ataching to events with dojo. What exactly is the difference?
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 l开发者_运维知识库ittle 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.
In short: there is no really different. They all do the same as intended.
Use the way that is the most convenient for you.
this
refers to the owner of the function that is currently executed. It would be different from the lexical context. So you cannot replace node
and evt
with this
.
精彩评论