Blog

The user events such as double click, hovering, keypress, 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.

Previous Page:-Click Here