dojo 위젯 요소에서 이벤트가 실행되지 않는 이유는 무엇입니까?

Question

이벤트를 발생시키지 않는 Dojo 위젯의 어려움이 있습니다.

나는 특정 요소에 이벤트를 바인딩하기 위해 dojo.query으로 시도했지만 이벤트를 발생시키지 않습니다. 그래서 나는 dijit.registry으로 시도했다. 하지만 요소를 클릭해도 이벤트가 발생하지 않습니다.

HTML

<div class="buttons"> 
    <input id="radio1" type="radio" data-dojo-type="dijit/form/RadioButton" name="radiobtn" /> <label for="radio1">one</label> 
    <input id="radio2" type="radio" data-dojo-type="dijit/form/RadioButton" name="radiobtn" /> <label for="radio2">Two</label> 
    <input id="radio3" type="radio" data-dojo-type="dijit/form/RadioButton" name="radiobtn" /> <label for="radio3">Three</label> 
</div> 

자바 스크립트

require(["dojo/parser", "dojo/query", "dijit/registry", "dijit/form/RadioButton", "dojo/domReady!"], function(parser, query, registry) { 
    parser.parse(); 

    on(query('.buttons input'), 'click', function() { 
     alert('Clicked');   
    }); 

    on(registry.byId('radio1'), 'click', function() { 
     alert('Clicked Radio1');  
    }); 
}); 

다음은이 문제의 Demo입니다.

dojo 위젯 요소에 dojo.query으로 이벤트를 트리거하는 방법은 무엇입니까?

Answer 1

그렇지 않습니다. reference guide을 읽으면 dojo/on 모듈이 DOM 이벤트에만 사용됨을 알 수 있습니다. 위젯은 DOM 노드도 사용하지만 widget events으로 캡슐화되어 있으므로 사용해서는 안됩니다.

예를 들어, 당신은 on() 기능을 사용해야하는 이벤트 핸들러를 등록하려면 :

registry.byId("radio1").on("click", function() { 
    console.log("Clicked"); 
}); 

나는 또한 당신의 JSFiddle을 업데이트했습니다.

---

당신이 정말로 dojo/query가 (여러 라디오 버튼을 처리하는), 당신은 dijit/registry 모듈의 byNode()을 사용하여 해당 DOM 노드를 기반으로 위젯에 액세스하는 것을 할 수있는 사용하려는 경우

. 예 :

query(".dijitRadio").forEach(function(domNode) { 
    registry.byNode(domNode).on("click", function() { 
     console.log("Clicked"); 
    }); 
}); 

하지만 이걸주의해야합니다. input 필드는 DOM 노드가 위젯으로 변환되고 dijit/form/RadioButton이 사용하는 템플릿으로 바뀌면 사라집니다. 라디오 버튼의 DOM 노드를 가져 오는 가장 좋은 방법은 dijitRadio 클래스를 사용하는 것입니다.

JSFiddle에 대한 또 다른 업데이트입니다.

---

작은 노트 : 그것은 당신이 (온/오프) 라디오 버튼의 상태 변화에 관심이 있다면 onChange 이벤트를 처리하는 더 좋은 생각이 될 수 있습니다.