Event Plugin

Back to plugins | Download plugin

The Event plugin adds 2 methods to the API wrapper, one to register event listeners on elements, an another to fire events, plus a new parameter to use when creating new DOM nodes, and it also extends the framework with the nano.event object, which includes 4 methods for manipulating events.

Register Event Listener

The on() method allows you to register events on an element. To register an event, you must pass at least the first 2 arguments. The method accepts these arguments in the following order:

  nano('example').on('click', function() { alert(nano(this).get()); }, false);

You can also automatically register event listerners when creating new DOM nodes.

  var button = new nano({
      parent: nano.body(),
      tag: 'button',
      text: 'Click Me',
      on: {
          click: function() {
              alert('You clicked me!');

Fire Events

To fire an event on an element you can call the fire() method and pass the name of the event without the "on" prefix:


Add Event Listener

The nano.event.add() method lets you add event listeners without wrapping an element with the API. The object passed as the first argument must be an existing DOM node. The method accepts these arguments in the following order:

  nano.event.add(button, 'click', function() { alert(nano(this).get()); }, false);

Delete Event Listener

To remove a previously registered event listener, call nano.event.del() and pass the same arguments used to register the event:

  nano.event.del(button, 'click', function() { alert(nano(this).get()); }, false);

Stop Propogation

The nano.event.stop() stops all propagation of the event in the bubbling phase. Stopping event propagation in the capturing phase is impossible.


Prevent Default

The nano.event.prevent() method cancels the default action of the element if one exists. This is most useful with form elements. For example, in the case of a text input, this would cancel the current key typed from being added to the input value.