En En

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


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

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

{{#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

Комментарии (2)

  1. polin11 22 февраля 2017, 01:34 # 0
    Ember нажатие правой кнопки мыши

    Привет, кужно написать обработчик нажатия правой кнопкой мыши, используя фрэймворк ember.js
    Мой пример
    template.hbs
    <button {{action "click_button"}} id='my_button'>Click and get result</button>
    Controller
    import Ember from 'ember';
    export default Ember.Component.extend({
        actions:{
    	    //Пытался так, но не работает
    		//Обработчик срабатывается со второго нажатия и количество нажатий  зависит от времени удержания нажатой клавиши мыши
            click_button()
            {
              $('#my_button').mousedown(function(event){
                   event.preventDefault();
                   if(event.button == 0)
    		          console.log('Left button')
    	           if(event.button == 2)
                      console.log('Rigth button')
            }); 
                  
            }
    	}
    )}
    
    Я видел документацию не смог разобраться. Очень нужен рабочий пример,
    заранее боагодарен
    1. dimcs 12 апреля 2017, 15:33 # 0
      Ну как минимум так, на сколько я понял

      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')
      }
      });
    Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.