有没有更好的方法将 NodeList 连接到 Dojo 上的多个事件？

Question

我想将焦点和按键事件设置为查询结果。我希望每个事件都链接到不同的方法。我让它像这样工作：

query('td').on('focus', tdFocus);
query('td').on('keyup', tdKeyUp);

我知道我也可以这样做：

query('td').on('focus, keyup', tdEvent);

然后我会在方法中处理这两个事件（或者用 if 或其他东西调用适当的方法。但我认为应该有更好的方法来做到这一点。

但我觉得应该有更好的方法来做到这一点。有人知道更好的方法吗？比如只做一个查询并将两个事件设置为 2 种不同的方法？

Answer 1

您可以 "cache" 将查询结果与您的事件处理程序 (KISS) 分开，例如：

var myQuery= query('td');
myQuery.on('focus', tdFocus);
myQuery.on('keyup', tdKeyUp);

优点：

只有一个查询 DOM（这对性能有好处）。
简洁的代码，为每个侦听器使用单独的回调，而不是一个 "fat" 回调，后者需要使用 switch 或 if 语句在内部处理所有事件侦听器.

Answer 2

作为建议，您可以创建自己的 class（使用声明）或自定义代码（作为片段），通过声明 {event, function} 对象。

您可以在这里找到所有道场活动：dojo events，还有请考虑下面我的建议片段：

require(["dojo/query","dojo/on","dojo/mouse","dijit/form/TextBox","dojo/ready","dojo/parser"],
    function(query,On,mouse,TextBox,ready){
       ready(function(){
            /*events function */
          var onFocus = function(evt) {
                console.log("onFocus");
            };
            
            var onKeyUp = function(evt) {
             console.log("onKeyUp");
            };
            
            var onMouseEnter = function(evt) {
             console.log("MouseEnter");
            };
      
            /*array containg event type and it's coresponding function */
            event_array = [{event:"focusin",action:onFocus},
                 {event:"keyup",action:onKeyUp},
                           {event:mouse.enter,action:onMouseEnter}];  
   
            /* atach event function */
     var attachEvents = function(node, events) {
             if(typeof(events.forEach) == "function") {
               events.forEach(function(elment){
                  typeof(elment.action) == "function" ? On(node,elment.event,elment.action) : "";
                })
              };
            }
      
            
     var node = query(".input"); 
            //call event attach function.
            attachEvents(node,event_array);
            
         
       })
    }
);

<link href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>

<body class="claro">
input one  &nbsp; <input class="input" data-dojo-type="dijit/form/TextBox" /> <br>
input two  &nbsp; <input class="input" data-dojo-type="dijit/form/TextBox" /> <br>
input three <input class="input" data-dojo-type="dijit/form/TextBox" /> <br>
</body>

您还可以在这里找到 Fiddle

有没有更好的方法将 NodeList 连接到 Dojo 上的多个事件？

Is there a better way to connect a NodeList to multiple events on Dojo?

javascript

dojo