Ember handles the event

You can respond to events in a component, such as a user's double-click, a mouse slide, a keyboard press, and so on. You only need to add the processing events provided by Ember to the component class, and Then Ember automatically determines that the user's actions are performing the appropriate events, as long as the events added to the component class do not conflict with you or even add multiple events at once, and the order in which the events are executed is executed according to the order in which they were triggered.

1. Simple event handling Prepare to create the required files for the demo using the Ember CLI:

ember g component handle-events
ember g route component-route

The resulting component template does not make any modifications.

{{yield}}

Note the implementation of the component class:

//  app/components/handle-events.js
import Ember from 'ember';
export default Ember.Component.extend({
    click: function() {
        alert('click...');
        return true;  // 返回true允许事件冒泡到父组件
    },
    mouseLeave: function() {
        alert("mouseDown....");
        return true;
    }
});

Two event click and mouseLeaver have been added to the component class, one is a click event and one is a mouse-away event, and more Ember-supported events are called handling-events.

The template for calling the component is as follows:

{{#handle-events}}
<span style="cursor: pointer;">从我身上飘过或者点我都会触发事件~</span>
{{/handle-events}}

When the user just mouse from the text "floating over me or point I will trigger the event" cross the city mouseLeave the user click mouseLeave the user clicks the text when the mouse has not moved away.

However, if you add events that are conflicting and can have unpredictable results, such as adding double-click and click events to the component class, only click events are executed and double-click events cannot be triggered.

2, send behavior

In some cases, your components need to support drag-and-drop events. For example, a component might want to send id to drop event.

{{drop-target action=”didDrop”}}

You can define the component's event processor to manage drop events. If necessary, you can prevent false by returning false.

//  app/components/drop-target.js
import Ember from 'ember';
export default Ember.Component.extend({
    attribuBindings: ['draggable'],
    draggable: 'true',
    dragOver: function() {
        return false;
    },
    didDrop: function(event) {
        let id = event.dataTransfer.getData('text/data');
        this.sendAction('action', id);
    }
});

This chapter is not much content, the focus is the first point of the content, the second point of the content is briefly introduced, more details please move the official website documents.

The full code of the blog post is placed in Github (the blog post has been modified several times, and the code on the blog post may be different from the github code, but the impact is small!). I f you think the blog post is a bit useful to you, please give me a star on the star project. Yours is definitely the biggest motivation for me!!