如何获取事件委托来处理Dojo FilteringSelect更改?

时间:2015-11-25 21:33:37

标签: javascript dojo event-handling

我有一个充满各种输入的Dojo表单,所有Dojo小部件;其中一个是dijit / form / FilteringSelect。我在窗体上定义了一个事件委托处理程序,以捕获窗体中所有Dojo窗口小部件的特定事件。委托使用CSS样式选择器语法来标识它将处理的所有类型的输入和事件,但是我找不到正确的选择器来捕获从FilteringSelect窗口小部件中选择的选项。与dijit / form / Select和dijit / form / ComboBox小部件相同的问题。

我在https://jsfiddle.net/gregorco/a3uxvzv3/1/创建了一个包含以下内容的演示:

<div id="testDiv">
<form data-dojo-type="dijit/form/Form" id="testForm" data-dojo-id="testForm"  encType="multipart/form-data" 
action="" method=""> 
<table>
<tr>
    <td align="left"><input data-dojo-type="dijit/form/RadioButton" data-dojo-id="yellowid" id="yellowid" name="color" value="4"/><label id="corpLabel"  for="yellowid">Yellow</label></td>
</tr>
<tr>
    <td align="left"><input data-dojo-type="dijit/form/RadioButton" id="redid" name="color" value="5"/><label class="forInput" for="redid">Red</label></td>
</tr>
<tr>
    <td align="left"><input data-dojo-type="dijit/form/RadioButton" data-dojo-id="blueid" id="blueid" name="color" value="6"/><label id="llpLabel"  for="blueid">Blue</label></td>
</tr>
<tr>
    <td align="left"><input data-dojo-type="dijit/form/RadioButton" id="greenid" name="color" value="7"/><label  for="greenid">Green</label></td>
</tr>
<tr>
    <td>Dojo FilteringSelect</td>
    <td>
        <select data-dojo-type="dijit/form/FilteringSelect" id="fruit" name="fruit">
<option value="AP">Apples</option>
<option value="OR" selected>Oranges</option>
<option value="PE" >Pears</option>
</select> &nbsp; (onChange event not triggered by selection, but typing value triggers event)
    </td>
</tr>
<tr>
    <td>Dojo Select</td>
    <td>
<select name="select1" data-dojo-type="dijit/form/Select">
<option value="TN">Tennessee</option>
<option value="VA" selected="selected">Virginia</option>
<option value="WA">Washington</option>
<option value="FL">Florida</option>
<option value="CA">California</option>
</select>
    </td>
</tr>
<tr>
    <td>Dojo ComboBox</td>
    <td>
    <select data-dojo-type="dijit/form/ComboBox" id="animal" name="animal">
<option>Dogs</option>
<option selected>Fish</option>
<option>Spiders</option>
</select>
</td>
</tr>
</table>
</form>
</div>

require(["dojo/dom", "dojo/on", "dojo/query",
"dojo/parser", "dojo/dom-construct", "dojo/domReady!"
    ], function(dom, dojoOn, dojoQuery, parser, domConstruct) {

         var eventDescriptions =
             "textarea:change,"+  
             "textarea:input,"+ 
             "input:change,"+  
             "input:input,"+ 
             "div.dijitArrowButtonInner:click,"+ 
             "select:change,"+  
             "grid:onRowClick,"+
             "button:click";
var paneForm = dom.byId("testForm");
         if(typeof paneForm != "undefined" && paneForm != null) {
             dojoOn(paneForm, eventDescriptions, handleFormEvent);
         }    

function handleFormEvent(event){ 
    console.log("handleFormEvent event="+event+" currentTarget="+event.currentTarget.id+", this.value="+this.value);
    console.log("event=");
    console.dir(event);
    console.log("this=");
    console.dir(this);
    alert("Event delegate caught this event of type: "+event.type);
}
});

事件委托处理程序会捕获用户键入FilteringSelect和Select小部件文本字段的事件,但不会从列表中选择选项时捕获。有没有办法让代表认可选择行动?

0 个答案:

没有答案