流星 - 活动

在本章中，我们将学习如何使用tag、class和id作为事件选择器。处理事件非常简单。

让我们在 HTML 模板中创建三个元素。第一个是p，第二个是myClass类，最后一个是myId id。

流星App.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。这些是我们上面提到的选择器。

流星App.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 - 按照上面的示例。