Deep Dive on Ember Events – Square Corner Blog – Medium


Types of Event Listeners in Ember

How do you know whether you’re using a DOM event listener or an Ember action listener? When will your action have access to the original DOM event? Can your action prevent other actions from being fired?

There are three main ways of adding listeners in Ember:

  1. Adding an Ember action listener to a component with an event name attribute.
{{some-component click=(action “handleClick”)}}

2. Adding an Ember action listener to a DOM node by modifying the element with the action helper.

<div {{action "handleClick"}}></div>
<div {{action "handleDoubleClick" on="doubleClick"}}></div>

3. Adding a DOM event listener to a DOM node by using an event HTML attribute.

<div onclick={{action "handleClick"}}></div>

(Pro tip: this is a great time to check out the Ember Twiddle demo if you haven’t yet! You can see for yourself how different combinations of these events bubble from children to parents, and modify the source code that runs the demo to explore further.)

Screenshot of click Component Attribute in Ember Twiddle demo.

1. Component Event Attributes

Listener Type: Ember action

Access to original DOM event: Yes

Supported events: defined by Ember.Component

Can it stop propagation:
Yes for other Ember actions, because those are fired after this action.*
No for DOM events, because those are fired before this action.

*You cannot pass bubbles=false as part of a closure action hash (like click=(action "foo" bubbles=false)). If you want to stop propagation, you have to call event.stopPropagation() in your handler. See this GitHub issue or the documentation for the action helper for more information.

Code examples for click Attribute actions. Link to examples in GitHub Gist.
Screenshot of Element Modifier in Ember Twiddle demo.

2. Element Modifiers

Listener Type: Ember action

Access to original DOM event: No

Supported events: defined by Ember.Templates.helpers

Can it stop propagation:
Yes for other Ember actions, because those are fired after this action.*
No for DOM events, because those are fired before this action.

*This type of action doesn’t have access to the original DOM event so it cannot call event.stopPropagation(). If you want to stop propagation, you have to set bubbles=false on the action helper.

Code examples for Element Modifier actions. Link to examples in GitHub Gist.
Screenshot of onClick HTML Attribute in Ember Twiddle demo.

3. DOM Event Attributes

Listener Type: DOM Event

Access to original DOM event: Yes

Supported events: defined by DOM API

Can it stop propagation:
Yes for both DOM events and Ember actions, because both of those are fired after this event.* **

*Setting bubbles=false on the action helper doesn’t actually stop propagation for DOM events — that’s an Ember-specific abstraction. If you want to stop propagation, you have to call event.stopPropagation() in your handler.

**This is where it gets extra funky — calling event.stopPropagation() will prevent any Ember actions from firing because of that event — even child actions, which totally goes against normal DOM propagation order but which you can see in action in this Ember Twiddle. Why? It’s because calling stopPropagation at this point prevents the event from bubbling up to the special <div id="root"> node that is the parent node of everything inside an Ember app. That node’s handler is what kicks off the process of firing Ember actions — see the flowchart above if this is still confusing!

Code examples for onClick Attribute actions. Link to examples in GitHub Gist.



Source link