- EmberJS Tutorial
- EmberJS - Home
- EmberJS - Overview
- EmberJS - Installation
- EmberJS - Core Concepts
- Creating and Running Application
- EmberJS - Object Model
- EmberJS - Router
- EmberJS - Templates
- EmberJS - Components
- EmberJS - Models
- EmberJS - Managing Dependencies
- EmberJS - Application Concerns
- EmberJS - Configuring Ember.js
- EmberJS - Ember Inspector
- EmberJS Useful Resources
- EmberJS - Quick Guide
- EmberJS - Useful Resources
- EmberJS - Discussion
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