EmberJS - Gestion des événements

Les événements utilisateur tels que le double clic, le survol, la pression de touche, etc. peuvent être gérés par les gestionnaires d'événements. Pour ce faire, appliquez le nom de l'événement en tant que méthode sur le composant.

Par exemple, considérons que nous avons un modèle comme indiqué ci-dessous -

{{#double-clickable}}
   //code here
{{/double-clickable}}

Lorsque vous double-cliquez sur l'élément, il affichera le message comme indiqué ci-dessous -

import Ember from 'ember';

export default Ember.Component.extend ({
   doubleClick() {
      document.write("The double click event has occurred!");
   }
});

Noms d'événements

Ember.js contient les événements intégrés suivants tels que les événements tactiles, clavier, souris, formulaire, glisser-déposer.

Événements tactiles

  • touchStart
  • touchMove
  • touchEnd
  • touchCancel

Événements de clavier

  • keyDown
  • keyUp
  • keyPress

Événements de souris

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

Événements de formulaire

  • submit
  • change
  • focusIn
  • focusOut
  • input

Événements de glisser-déposer HTML5

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

Vous pouvez utiliser des gestionnaires d'événements pour envoyer des actions d'un composant à votre application. Pour plus d'informations sur l'envoi d'actions, consultez la section suivante .