流星-イベント

この章では、 tag、class 、および id をイベントセレクタとして使用する方法を学習します。イベントの操作は非常に簡単です。

HTMLテンプレートに3つの要素を作成しましょう。最初のものは p 、2番目のものは myClass クラス、最後のものは myId idです。

meteorAppl

<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ファイルでは、上で作成した3つの要素に対して3つのイベントを設定しています。 click イベントの後に p、.myClass および*＃myId *を追加していることがわかります。これらは、前述の*セレクタ*です。

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イベント（クリック、dbclick、コンテキストメニュー、マウスダウン、マウスアップ、マウスオーバー、マウスアウト、マウスムーブ）を使用できます。

Meteor-events

流星-イベント

meteorAppl

meteorApp.js