EmberJS - Handling Events



The user events such as double click, hovering, key press etc can be handled by event handlers. To do this, apply the event name as a method on the component.

For instance, consider we have a template as given below −

{{#double-clickable}}
   //code here
{{/double-clickable}}

When you double-click on the element, it will display the message as shown below −

import Ember from 'ember';

export default Ember.Component.extend ({
   doubleClick() {
      document.write("The double click event has occurred!");
   }
});

Event Names

Ember.js contains following built-in events such as touch, keyboard, mouse, form, drag and drop events.

Touch Events

  • touchStart
  • touchMove
  • touchEnd
  • touchCancel

Keyboard Events

  • keyDown
  • keyUp
  • keyPress

Mouse Events

  • mouseDown
  • mouseUp
  • contextMenu
  • click
  • doubleClick
  • mouseMove
  • focusIn
  • focusOut
  • mouseEnte
  • mouseLeave

Form Events

  • submit
  • change
  • focusIn
  • focusOut
  • input

HTML5 Drag and Drop Events

  • dragStart
  • drag
  • dragEnter
  • dragLeave
  • dragOver
  • dragEnd
  • drop

You can use event handlers to send actions from component to your application. For more information on sending actions, check out the following section.

emberjs_component.htm
Advertisements