ber.js 入門指南——處理事件

       你可以在元件中響應事件，比如使用者的雙擊、滑鼠滑過、鍵盤的按下等等事件。只需要在元件類中增加Ember提供的處理事件，然後Ember會自動判斷使用者的操作執行相應的事件，只要在元件類中新增的事件不衝突你甚至一次性增加多個事件，事件執行次序根據觸發的次序執行。

1，簡單事件處理

準備工作，使用Ember CLI建立演示所需檔案：

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

<!--  app/components/handle-events.hbs -->
 
{{yield}}
 

注意看元件類的實現：

//  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支援的事件請看這裡。

       呼叫元件的模板如下：

<!--  app/templates/component-route.hbs  -->
 
{{#handle-events}}
<span style="cursor: pointer;">從我身上飄過或者點我都會觸發事件~</span>
{{/handle-events}}

       當用戶只是把滑鼠從文字“從我身上飄過或者點我都會觸發事件~”上劃過市只執行mouseLeave事件，當用戶點選文字時先執行

       但是如果你增加的事件是有衝突的可能會得到無法預知的結果，比如在元件類中增加了雙擊和單擊事件，此時只會執行單擊事件，雙擊事件就無法觸發。

2，傳送行為

某些情況下，你的元件需要支援拖放事件。比如元件可能要傳送一個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);
       }
});

       本章內容不多，重點是第一點的內容，第二點的內容就簡單介紹，更多詳細資訊請移步官網文件。