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.