Обработка событий

В компоненте с помощью обработчиков событий вы можете реагировать на действия пользователя, например двойное нажатие кнопки мыши, наведение курсора и нажатия клавиш. Просто реализуйте имя события, на которое хотите среагировать, в качестве метода в компоненте.

Представьте, что у нас есть такой шаблон:

{{#double-clickable}}
  This is a double clickable area!
{{/double-clickable}}

Реализуем double-clickable так, чтобы при нажатии отображалось предупреждение:

app/components/double-clickable.js

import Ember from 'ember';

export default Ember.Component.extend({
  doubleClick() {
    alert("DoubleClickableComponent was clicked!");
  }
});

События браузера могут распространяться по модели DOM и потенциально охватывать родительский(-е) компонент(-ы) по порядку. Чтобы разрешить распространение, используйте return true; из метода обработчика события в компоненте.

app/components/double-clickable.js

import Ember from 'ember';

export default Ember.Component.extend({
  doubleClick() {
    Ember.Logger.info("DoubleClickableComponent was clicked!");
    return true;
  }
});

Список имен событий смотрите в конце главы. Любое событие можно определить как обработчик событий в компоненте.

Отправка действий

В некоторых случаях для компонента нужно определять обработчики событий, чтобы поддерживать, например, различное поведение перетаскивания. Скажем, компонент должен отправлять id при получении события drop:

{{drop-target action=(action "didDrop")}}

Вы можете определить обработчики событий компонента, чтобы управлять событием drop. И если вам нужно, можете также остановить распространение события с помощью return false;.

app/components/drop-target.js

import Ember from 'ember';

export default Ember.Component.extend({
  attributeBindings: ['draggable'],
  draggable: 'true',

  dragOver() {
    return false;
  },

  drop(event) {
    let id = event.dataTransfer.getData('text/data');
    this.get('action')(id);
  }
});

В компоненте выше didDrop — переданное action (действие). Это действие вызвано из обработчика события drop. Оно передает один аргумент: значение id, обнаруженное в объекте события drop.

Также, чтобы сохранить исходное поведение события и использовать действие, можно назначить (замкнутое) действие встроенному обработчику события. Рассмотрим шаблон ниже, который включает обработчик onclick с элементом button:

<button onclick={{action 'signUp'}}>Sign Up</button>

Действие signUp — просто функция, определенная в хеше actions компонента. Так как действие назначено встроенному обработчику, объявление функции может определить объект event как первый параметр.

actions: {
  signUp: function(event){ 
    // Only when assigning the action to an inline handler, the event object
    // is passed to the action as the first parameter.
  }
}

Для функции, определенной в actions, считается нормальным поведением, если она не получает событие браузера в качестве аргумента. Поэтому объявление функции для действия не может определить параметр event. Следующий пример демонстрирует исходное поведение с использованием действия.

<button {{action 'signUp'}}>Sign Up</button>

actions: {
  signUp: function(){
    // No event object is passed to the action.
  }
}

Чтобы использовать объект event как параметр функции:

• Определите обработчик события в компоненте (что необходимо для получения объекта event браузера).
• Или назначьте действие встроенному обработчику события в шаблоне (что создаст замкнутое действие и приведет к получению объекта event в качестве аргумента).

Имена событий

Описанные выше примеры обработки событий реагируют на один набор событий. Имена встроенных событий перечислены ниже. Индивидуально настроенные события можно зарегистрировать с помощью Ember.Application.customEvents.

События касания:

• touchStart
• touchMove
• touchEnd
• touchCancel

События клавиатуры:

• keyDown
• keyUp
• keyPress

События мыши:

• mouseDown
• mouseUp
• contextMenu
• click
• doubleClick
• mouseMove
• focusIn
• focusOut
• mouseEnter
• mouseLeave

События формы:

• submit
• change
• focusIn
• focusOut
• input

События перетаскивания в HTML5:

• dragStart
• drag
• dragEnter
• dragLeave
• dragOver
• dragEnd
• drop

Написать комментарий