Meteoro - Eventos

En este capítulo, aprenderemos a usar tag, class y idcomo selector de eventos. Trabajar con eventos es bastante sencillo.

Creemos tres elementos en la plantilla HTML. El primero esp, el segundo es myClass clase y la última es myId carné de identidad.

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>

En nuestro archivo JavaScript, estamos configurando tres eventos para tres elementos que creamos anteriormente. Puedes ver que solo estamos agregandop, .myClass y #myId después de la clickevento. Estos son losselectors mencionamos anteriormente.

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 probar esto, primero podemos hacer clic en PARAGRAPH, entonces la CLASS botón y finalmente el IDbotón. Obtendremos el siguiente registro de la consola.

Podemos usar todos los demás eventos de JavaScript: clic, dbclick, contextmenu, mousedown, mouseup, mouseover, mouseout, mousemove, siguiendo el ejemplo anterior.