В этой главе мы узнаем, как использовать тег, класс и идентификатор в качестве селектора событий. Работать с событиями довольно просто.
Давайте создадим три элемента в шаблоне HTML. Первый — это p , второй — это класс myClass, а последний — 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>
В нашем файле JavaScript мы устанавливаем три события для трех элементов, которые мы создали выше. Вы можете видеть, что мы просто добавляем p, .myClass и #myId после события click . Это селекторы, которые мы упоминали выше.
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...");
},
});
}
Чтобы проверить это, мы можем сначала нажать на PARAGRAPH , затем кнопку CLASS и, наконец, кнопку ID . Мы получим следующий консольный журнал.
Мы можем использовать все остальные события JavaScript — click, dbclick, contextmenu, mousedown, mouseup, mouseover, mouseout, mousemove — в соответствии с примером выше.