Search code examples
onclickdojodom-eventsjs-amd

dojo multiple onclicks with different function calls


while converting Dojo Non-AMD JS to AMD, finding difficulty with event handling we have many buttons,span & div's with different events with multiple actions. so want to know should we use on or connect & how to use it to multiple element events?

 <span onclick="a.abShow(); t.T1(); p.show();">

 <span onclick="a.test(); setTimeout(a.test1(),100)">
 <td onclick="ab.test7(); t.test();">

 Button('gallery', 'e.Refresh();a.test();','');

 ........

Solution

  • You can easily run multiple actions on an event using the dojo/on module:

    dojo/on is a general-purpose event handler module for DOM nodes and other event emitting objects, providing normalized event listening and event dispatching functionality.

    https://dojotoolkit.org/reference-guide/1.10/dojo/on.html#dojo-on

    require(['dojo/on', 'dojo/domReady!'], function (on) {
    
      on(dojo.byId('my-span'), 'click', function (e) {
        alert('I throw an alert');
        alert('And do it again');
        alert('And again');
      });
    
      on(dojo.byId('my-other-span'), 'click', function (e) {
        alert('I throw an alert');
        alert('And do it again');
        alert('And again');
      });
    
    });
    <script type="application/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
    <span id="my-span">Click me!</span>
    <span id="my-other-span">Click me too!</span>