使用事件是非常简单的。我们将学习如何使用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. Can't connect to MySQL server on '127.0.0.1' (10061)

    一条命令解决 mysqld --initialize-insecure --user=mysql 但这只是简单解决问题,详细查看百度经验,知乎上的讨论 forget root password ref ...

  2. Oracle中的for和while循环

    实例: beginfor i in 51..500 loop delete from test t where t.date=to_date('2016-07-01', 'yyyy-MM-dd') a ...

  3. hdu4407Sum(容斥原理)

    http://acm.hdu.edu.cn/showproblem.php?pid=4407 Sum Time Limit: 2000/1000 MS (Java/Others)     Memory ...

  4. 条款36:绝不重新定义继承而来的non-virtual函数(Never redefine an inherited non-virtual function)

    NOTE: 1.绝对不要重新定义继承而来的non-virtual函数.

  5. C第12章-----堆

    #include <stdio.h> #include <stdlib.h> //声明Person结构 //struct Person{ //    float heightI ...

  6. LeetCode728. 自除数

    自除数 是指可以被它包含的每一位数除尽的数. 例如,128 是一个自除数,因为 128 % 1 == 0,128 % 2 == 0,128 % 8 == 0. 还有,自除数不允许包含 0 . 给定上边 ...

  7. [第一波模拟\day1\T2]{分班}(divide.cpp)

    [题目描述] 小N,小A,小T又大了一岁了. 现在,他们已经是高二年级的学生了.众所周知,高二的小朋友是要进行文理科分班考试的,这样子的话,三个好朋友说不定就会不分在一个班. 于是三个人决定,都考平均 ...

  8. 【MFC】利用MFC写一个计时器小程序

    1整体设计 创建对话框程序,并且设计对话框相关控件如图 相应的ID和对应的成员变量如图: 我的想法是这样的,只读属性的编辑框添加有CString类型的成员变量(如s_hour),在xxxDlg.h里另 ...

  9. 大数据学习——hadoop集群搭建2.X

    1.准备Linux环境 1.0先将虚拟机的网络模式选为NAT 1.1修改主机名 vi /etc/sysconfig/network NETWORKING=yes HOSTNAME=itcast ### ...

  10. mysql 分段统计数据

    一个简单的分段统计的问题:student 表{id,name,score} 字段,统计各个分数段的人数.规则:60以下不及格,60-80良,80-100优. SELECT sum(CASE when ...