Meteor - Eventi

In questo capitolo impareremo come usare tag, class e idcome selettore di eventi. Lavorare con gli eventi è piuttosto semplice.

Creiamo tre elementi nel modello HTML. Il primo èp, il secondo è myClass classe e l'ultimo è myId id.

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>

Nel nostro file JavaScript, stiamo impostando tre eventi per tre elementi che abbiamo creato sopra. Puoi vedere che stiamo solo aggiungendop, .myClass e #myId dopo il clickevento. Queste sono leselectors abbiamo menzionato sopra.

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...");
      },
   });
}

Per testarlo, possiamo prima fare clic su PARAGRAPH, poi il CLASS e infine il pulsante IDpulsante. Otterremo il seguente registro della console.

Possiamo usare tutti gli altri eventi JavaScript - click, dbclick, contextmenu, mousedown, mouseup, mouseover, mouseout, mousemove - seguendo l'esempio sopra.