开发者

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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜