Ember 處理事件

你可以在組件中響應(yīng)事件，比如用戶的雙擊、鼠標(biāo)滑過、鍵盤的按下等等事件。只需要在組件類中增加Ember提供的處理事件，然后Ember會自動判斷用戶的操作執(zhí)行相應(yīng)的事件，只要在組件類中添加的事件不沖突你甚至一次性增加多個事件，事件執(zhí)行次序根據(jù)觸發(fā)的次序執(zhí)行。

1，簡單事件處理 準(zhǔn)備工作，使用Ember CLI創(chuàng)建演示所需文件：

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

生成的組件模板不做任何修改。

{{yield}}

注意看組件類的實現(xiàn)：

//  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;
    }
});

在組件類中增加了兩個事件click和mouseLeaver，一個是單擊事件一個是鼠標(biāo)移開事件，更多Ember支持的事件請看handling-events。

調(diào)用組件的模板如下：

{{#handle-events}}
<span style="cursor: pointer;">從我身上飄過或者點(diǎn)我都會觸發(fā)事件~</span>
{{/handle-events}}

當(dāng)用戶只是把鼠標(biāo)從文字“從我身上飄過或者點(diǎn)我都會觸發(fā)事件~”上劃過市只執(zhí)行mouseLeave事件，當(dāng)用戶點(diǎn)擊文字時先執(zhí)行click事件再執(zhí)行mouseLeave事件，因為用戶點(diǎn)擊文字時鼠標(biāo)還沒移開。

但是如果你增加的事件是有沖突的可能會得到無法預(yù)知的結(jié)果，比如在組件類中增加了雙擊和單擊事件，此時只會執(zhí)行單擊事件，雙擊事件就無法觸發(fā)。

2，發(fā)送行為

某些情況下，你的組件需要支持拖放事件。比如組件可能要發(fā)送一個id到drop事件中。

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

你可以定義組件的事件處理器去管理drop事件。如果有需要可以通過返回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);
    }
});

本章內(nèi)容不多，重點(diǎn)是第一點(diǎn)的內(nèi)容，第二點(diǎn)的內(nèi)容就簡單介紹，更多詳細(xì)信息請移步官網(wǎng)文檔。

博文完整代碼放在Github（博文經(jīng)過多次修改，博文上的代碼與github代碼可能有出入，不過影響不大！），如果你覺得博文對你有點(diǎn)用，請在github項目上給我點(diǎn)個star吧。您的肯定對我來說是最大的動力！！