custom event is not triggered on dojo widget

dojo, events, javascript

Solution

Widget events

You should not use `dojo/on` to add event handlers to widgets, it's only for DOM nodes. If you extend from `dijit/_WidgetBase` (like you do), then there's a method called `on()` which you can use, for example:

myWidget.on("customevent", function(data) {
    console.log( " received notification "+data );
});

Widget extension points

I'm not sure what the `emit()` function does, but it seems that here's the problem. According to the docs you should write your extension points just with plain functions. For example:

postCreate : function () {
    on(this.searchtextbox,"click",lang.hitch(this, "_onClick"));
},
_onClick: function(event) {
    // This is where you put your code
    console.log( "Click event in widget "+event );
    this.onCustomEvent(event.x);
},
onCustomEvent: function() {
     // This can be left empty, it will be used as the extension point
}

In this case you will bind the click event to the `_onClick()` function, which in turn calls `onCustomEvent()` with the correct arguments. This function is for public use and can be used to bind custom event handlers.

Here is the full example.

Problem

I have dojo Custom widget. I need to emit a event from the custom widget, this the code where I have added the event listener ``` <!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript"> var dojoConfig = { async: true, parseOnLoad: true, isDebug : true, packages:[ { name:"custom", location:"/Test/js" } ] }; </script> <script src="//localhost:8080/dojo1.9.0/dojo/dojo.js"></script> </head> <body> <script> require(["custom/MyWidget","dojo/on","dojo/dom-construct","dojo/_base/window","dojo/domReady!"],function(MyWidget,on,domconstruct,window){ var mywidget = new MyWidget(); mywidget.startup(); domconstruct.place(mywidget.domNode,window.body(),"after"); on(mywidget,"customevent",function(data){ console.log( " received notification "+data ); }); }); </script> </body> </html> ``` and widget as below ``` define([ "dojo/_base/declare", "dijit/_WidgetBase", "dijit/_OnDijitClickMixin", "dijit/_TemplatedMixin", "dojo/text!./widget.html", "dojo/on", "dojo/_base/lang" ], function (declare, _WidgetBase, _OnDijitClickMixin, _TemplatedMixin, template,on,lang) { return declare([_WidgetBase, _OnDijitClickMixin, _TemplatedMixin], { templateString: template, //  your custom code goes here _onClick:function() { }, postCreate : function () { on(this.searchtextbox,"click",lang.hitch(this,"sendEvent")); }, sendEvent : function(event) { console.log( "Click event in widget "+event ); this.emit("customevent",event.x) } }); }); ``` //Widget.html ``` <div class="${baseClass}" data-dojo-attach-point="searchtextbox"> <p> here your widget </p> </div> ``` Problem is the line `this.emit("customevent",event.x)` is throwing error

Original source