Ember 處理事件

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

1，簡單事件處理 準備工作，使用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，一個是單擊事件一個是鼠標移開事件，更多Ember支持的事件請看handling-events。

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

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

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

但是如果你增加的事件是有沖突的可能會得到無法預知的結果，比如在組件類中增加了雙擊和單擊事件，此時只會執(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)容不多，重點是第一點的內(nèi)容，第二點的內(nèi)容就簡單介紹，更多詳細信息請移步官網(wǎng)文檔。

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