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.