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:

event [string] (name of the event without the "on" prefix, for example, "click")
function [function] (function to register to the event)
mode [boolean] (set to "true" for capturing and "false" for bubbling)

  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:

  nano('example').fire('click');

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:

node [object] (DOM node to use)
event [string] (name of the event without the "on" prefix, for example, "click")
function [function] (function to register to the event)
mode [boolean] (set to "true" for capturing and "false" for bubbling)

  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:

node [object] (DOM node used)
event [string] (name of the event without the "on" prefix, for example, "click")
function [function] (function registered to the event)
mode [boolean] (set to "true" for capturing and "false" for bubbling)

  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.

event [object] (current event object)

  nano.event.stop(event);

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.

event [object] (current event object)

  nano.event.prevent(event);