Meteor Tutorial
Meteor Useful Resources
Selected Reading
- Meteor - Best Practices
- Meteor - ToDo App
- Meteor - Running on mobile
- Meteor - Deployment
- Meteor - Structure
- Meteor - Publish & Subscribe
- Meteor - Package.js
- Meteor - Methods
- Meteor - Accounts
- Meteor - Sorting
- Meteor - Security
- Meteor - Assets
- Meteor - Email
- Meteor - HTTP
- Meteor - EJSON
- Meteor - Timers
- Meteor - Blaze
- Meteor - Check
- Meteor - Core API
- Meteor - Packages
- Meteor - Tracker
- Meteor - Session
- Meteor - Events
- Meteor - Forms
- Meteor - Collections
- Meteor - Templates
- Meteor - First Application
- Meteor - Environment Setup
- Meteor - Overview
- Meteor - Home
Meteor Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Meteor - Events
Meteor - Events
In this chapter, we will learn how to use tag, class and id as an event selector. Working with events is pretty straightforward.
Let s create three elements in the HTML template. The first one is p, the second one is myClass class and the last one is myId id.
meteorApp.html
<head>
<title>meteorApp</title>
</head>
<body>
<span>
{{> myTemplate}}
</span>
</body>
<template name = "myTemplate">
<p>PARAGRAPH...</p>
<button class = "myClass">CLASS</button>
<button id = "myId">ID</button>
</template>
In our JavaScript file, we are setting three events for three elements that we created above. You can see that we are just adding p, .myClass and #myId after the cpck event. These are the selectors we mentioned above.
meteorApp.js
if (Meteor.isCpent) {
Template.myTemplate.events({
cpck p : function() {
console.log("The PARAGRAPH is cpcked...");
},
cpck .myClass : function() {
console.log("The CLASS is cpcked...");
},
cpck #myId : function() {
console.log("The ID is cpcked...");
},
});
}
To test this, we can first cpck on PARAGRAPH, then the CLASS button and finally the ID button. We will get the following console log.
We can use all the other JavaScript events - cpck, dbcpck, contextmenu, mousedown, mouseup, mouseover, mouseout, mousemove - following the example above.
Advertisements