使用事件是非常简单的。我们将学习如何使用tag,class 和id作为事件选择器。

让我们创建HTML模板三大要素。第一个是 p 标签，第二个是 myClass 类，最后一个是myId。

meteorApp/import/ui/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事件之后。这些都是我们上面提到的选择器。

client/main.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 按照上述的例子。

Meteor事件的更多相关文章

  1. 【译】Meteor 新手教程：在排行榜上添加新特性

    原文:http://danneu.com/posts/6-meteor-tutorial-for-fellow-noobs-adding-features-to-the-leaderboard-dem ...

  2. JNI详解---从不懂到理解

    转载:https://blog.csdn.net/hui12581/article/details/44832651 Chap1:JNI完全手册... 3 Chap2:JNI-百度百科... 11 C ...

  3. Meteor全栈开发平台 - 不仅仅是前端

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonnode/ .网站上有对应每一 ...

  4. 怎么评价Facebook的Relay框架？Meteor.js 是什么？

    http://www.zhihu.com/question/34531232?rf=34500201 Meteor.js 是什么? 作者:陈天链接:http://www.zhihu.com/quest ...

  5. 【转换模型+扫描线】【UVA1398】Meteor

    The famous Korean internet company nhn has provided an internet-based photo service which allows The ...

  6. Meteor全栈开发平台

    Meteor全栈开发平台 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonno ...

  7. Meteor入门

    转载Meteor入门介绍   Meteor是什么 基于nodejs的实时web APP开发框架. Meteor能带来什么 简单的说,你可以用js搞定客户端.服务端的开发.另外,客户端.服务端的界限被极 ...

  8. Meteor入门介绍

    Meteor是什么 基于nodejs的实时web APP开发框架. Meteor能带来什么 简单的说,你可以用js搞定客户端.服务端的开发.另外,客户端.服务端的界限被极大的模糊.客户端的界面跟服务端 ...

  9. Meteor.js异步全解

    翻译来源: http://phucnguyen.info/blog/everything-you-need-to-know-about-async-meteor/ posted in Web Deve ...

随机推荐

  1. uva1610 Party Games

    细节值得注意 注意vector<string>是可以直接sort的! #include <iostream> #include <string> #include ...

  2. iview tabs里面放入 i-switch 注意slot不是写在 props里面

    iview tabs里面放入 i-switch 注意slot不是写在 props里面 <Tabs value="name1"> <TabPane :label=& ...

  3. QT+ 使用标准对话框+关于对话框+问题对话框+文件对话框

    #include "mainwindow.h" #include <QMenuBar> #include <QMenu> #include <QAct ...

  4. QT_6_QMainWindow

    QMainWindow 1.1. 菜单栏 1.1.1. 只有一个 1.1.2. QMenuBar *bar = MenuBar(); 1.1.3. 设置到窗口中 setMenuBar(bar); 1. ...

  5. saltstack install on centos7

    saltstack offical website reference blog summary install virtualbox yum install VirtualBox-5.2 insta ...

  6. HDU-4791-Alice‘s Print Service

    分析: 1.由于价格是递减的,所以可能出现si*pi>sj*pj(j>i).所以要有一个数组来储存当前端点的最小值. 2.然后二分查找当前的si,比较q*p[i]和M[i+1].不过在这之 ...

  7. mysql 数据库 show命令

    MySQL中有很多的基本命令,show命令也是其中之一,在很多使用者中对show命令的使用还容易产生混淆,本文汇集了show命令的众多用法. 1. show tables或show tables fr ...

  8. Shading-jdbc源码分析-sql词法解析

    前言 前有芋艿大佬已经发过相关分析的文章,自己觉的源码总归要看一下,然后看了就要记录下来(记性很差...),所以就有了这篇文章(以后还要继续更

  9. LeetCoce 413. Arithmetic Slices

    A sequence of number is called arithmetic if it consists of at least three elements and if the diffe ...

  10. centos挂载本地镜像作为yum源

    1.安装Centos后默认的Yum源如下 ll /etc/yum.repos.d/   [root@localhost ~]# ll /etc/yum.repos.d/ total 32 -rw-r- ...