Meteor - Eventos

Neste capítulo, aprenderemos como usar tag, class e idcomo um seletor de eventos. Trabalhar com eventos é bastante simples.

Vamos criar três elementos no template HTML. O primeiro ép, o segundo é myClass classe e a última é myId Eu iria.

meteorApp.html

<head>
   <title>meteorApp</title>
</head>
 
<body>
   <div>
      {{> myTemplate}}
   </div>
</body>
 
<template name = "myTemplate">
   <p>PARAGRAPH...</p>
   <button class = "myClass">CLASS</button>
   <button id = "myId">ID</button>
</template>

Em nosso arquivo JavaScript, estamos definindo três eventos para três elementos que criamos acima. Você pode ver que estamos apenas adicionandop, .myClass e #myId depois de clickevento. Estes são osselectors mencionamos acima.

meteorApp.js

if (Meteor.isClient) {

   Template.myTemplate.events({

      'click p': function() {
         console.log("The PARAGRAPH is clicked...");
      },

      'click .myClass': function() {
         console.log("The CLASS is clicked...");
      },

      'click #myId': function() {
         console.log("The ID is clicked...");
      },
   });
}

Para testar isso, podemos primeiro clicar em PARAGRAPH, então o CLASS botão e finalmente o IDbotão. Obteremos o seguinte log do console.

Podemos usar todos os outros eventos JavaScript - click, dbclick, contextmenu, mousedown, mouseup, mouseover, mouseout, mousemove - seguindo o exemplo acima.