What is correct way to pass on event parameter in DOJO?

Question

I am working on Dojo Version 1.8.I have designed one custom widget as below. Its a snippet

 <div> <div> <input id ="NZ1", data-dojo-attch-point = "NZ1" data-dojo-attch-type = "ecm.widget.ValidationTextBox" data-dojo-attch-event = "onBlur : makeAllSmall" /> </div> <div> <input id ="NZ2", data-dojo-attch-point = "NZ2" data-dojo-attch-type = "ecm.widget.ValidationTextBox" data-dojo-attch-event = "onBlur: makeAllSmall" /> </div> </div> 

Here is event handler

 makeAllSmall : function(evt){ var currVal=evt.target.value; currVal = currVal.toLowerCase(); /**Some Other business logic on currVal **/ } 

This evt is always coming as undefined . I am quite new to Dojo. Am I missing something in HTML side ? I tried to change HTML as below but not luck

  <input id ="NZ2", data-dojo-attch-point = "NZ2" data-dojo-attch-type = "ecm.widget.ValidationTextBox" data-dojo-attch-event = "onBlur : makeAllSmall" data-dojo-args="e" /> 

Answer 1

First thing first, is there a typo in the method "onBlurr"? I see there is an extra 'r'. Shouldn't it be "onBlur"?

If you look at the DOJO API documentation for onBlur event, it doesn't pass an event object like what you are expecting

onBlur()
Defined by: dijit/_FocusMixin

Called when the widget stops being "active" because focus moved to something outside of it, or the user clicked somewhere outside of it, or the widget was hidden.
Examples
Example 1
var btn = new Button();
// when /my/topic is published, this button changes its label to
// be the parameter of the topic.
btn.subscribe("/my/topic", function(v){
this.set("label", v);
});

Next, in your event handler, you are trying to change the text to lowerCase and this can be done like

makeAllSmall : function(){  
    var currVal=this.get("value");
    currVal = currVal.toLowerCase();
    /**Some Other business logic on currVal **/
}

Another way of doing this without the event handler is to force the ValidationTextBox to convert everything to lowercase using construction parameters like

<input 
             id ="NZ2",
             data-dojo-attach-point = "NZ2"
             data-dojo-attach-type = "ecm.widget.ValidationTextBox"
            data-dojo-props='lowercase:true'
             data-dojo-attach-event = "onBlurr : makeAllSmall"
         />

Note that I have added data-dojo-props='lowercase:true'

Hope this helps.

Answer 2

You should be able to attach a DOM event to your custom widget by:

• Using data attribute data-dojo-attach-event in the markup.
• And using _AttachMixin passing your callBack function.

Example:

---

<div id="somenode"><span data-dojo-attach-point="anattachpoint"
     data-dojo-attach-event="click: clicked">Click me</span></div>

var MyDijit = declare([ _WidgetBase, _AttachMixin ], {
    // .. declaration goes here ..
    clicked: function(e) {
        // handle event
    }
});
// instantiate the dijit instance, which will attach to the 'somenode' div.
var mydijit = new MyDijit({}, dom.byId('somenode'));
mydijit.startup();