Обработка событий
В компоненте с помощью обработчиков событий вы можете реагировать на действия пользователя, например двойное нажатие кнопки мыши, наведение курсора и нажатия клавиш. Просто реализуйте имя события, на которое хотите среагировать, в качестве метода в компоненте.
Представьте, что у нас есть такой шаблон:
{{#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
Привет, кужно написать обработчик нажатия правой кнопкой мыши, используя фрэймворк ember.js
Мой пример
template.hbs
Я видел документацию не смог разобраться. Очень нужен рабочий пример,
заранее боагодарен
import Ember from 'ember';
export default Ember.Component.extend({
mouseDown(event) {
if(event.button == 0)
console.log('Left button');
if(event.button == 2)
console.log('Rigth button')
}
});