Handling Events

You can respond to user events on your component like double-clicking, hovering,
and key presses through event handlers. Simply implement the name of the event
you want to respond to as a method on your component.

For example, imagine we have a template like this:

{{#double-clickable}}
This is a double clickable area!
{{/double-clickable}}

Let's implement double-clickable such that when it is
clicked, an alert is displayed:

In the above component, didDrop is the action passed in. This action is
called from the drop event handler and passes one argument to the action -
the id value found through the drop event object.

Another way to preserve native event behaviors and use an action, is to
assign a (closure) action to an inline event handler. Consider the
template below which includes an onclick handler on a button element:

<button onclick={{action "signUp"}}>Sign Up</button>

The signUp action is simply a function defined on the actions hash
of a component. Since the action is assigned to an inline handler, the
function definition can define the event object as its first parameter.

actions: {
signUp(event){
// Only when assigning the action to an inline handler, the event object
// is passed to the action as the first parameter.
}
}

The normal behavior for a function defined in actions does not receive the
browser event as an argument. So, the function definition for the action cannot
define an event parameter. The following example demonstrates the
default behavior using an action.

<button {{action "signUp"}}>Sign Up</button>

actions: {
signUp() {
// No event object is passed to the action.
}
}

To utilize an event object as a function parameter:

Define the event handler in the component (which is designed to receive the
browser event object).

Or, assign an action to an inline event handler in the template (which
creates a closure action and does receive the event object as an argument).

Event Names

The event handling examples described above respond to one set of events.
The names of the built-in events are listed below. Custom events can be
registered by using Application.customEvents.