开发者

Three ways of ataching to events with dojo. What exactly is the difference?

开发者 https://www.devze.com 2022-12-24 07:24 出处:网络
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

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

精彩评论

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

关注公众号