Question

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

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

我知道我也可以这样做：

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

然后我会对方法中的两个事件进行处理（或者用if或者之类的方法调用适当的方法。但我认为应该有更好的方法来做到这一点。

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

Answer 1

您可以“缓存”查询结果并将事件处理程序（KISS）保持分离示例：

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

优点：

只有一个DOM查询（这对性能有利）。
在保持简单的同时清理代码，为每个侦听器使用单独的回调而不是一个需要使用switch或if语句在内部处理所有事件侦听器的“胖”回调。

Answer 2

作为建议，您可以通过声明{event, function}对象的数组来创建自己的类（使用声明）或自定义代码（作为片段），将事件附加到节点及其相应的执行功能

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

＆＃13;

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);
            
         
      	})
    }
);

＆＃13;

<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>

＆＃13;

您也可以在这里找到Fiddle

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

2 个答案: