Meteor事件
让我们创建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事件的更多相关文章
- 【译】Meteor 新手教程：在排行榜上添加新特性
原文:http://danneu.com/posts/6-meteor-tutorial-for-fellow-noobs-adding-features-to-the-leaderboard-dem ...
- JNI详解---从不懂到理解
转载:https://blog.csdn.net/hui12581/article/details/44832651 Chap1:JNI完全手册... 3 Chap2:JNI-百度百科... 11 C ...
- Meteor全栈开发平台 - 不仅仅是前端
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonnode/ .网站上有对应每一 ...
- 怎么评价Facebook的Relay框架？Meteor.js 是什么？
http://www.zhihu.com/question/34531232?rf=34500201 Meteor.js 是什么? 作者:陈天链接:http://www.zhihu.com/quest ...
- 【转换模型+扫描线】【UVA1398】Meteor
The famous Korean internet company nhn has provided an internet-based photo service which allows The ...
- Meteor全栈开发平台
Meteor全栈开发平台 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonno ...
- Meteor入门
转载Meteor入门介绍 Meteor是什么 基于nodejs的实时web APP开发框架. Meteor能带来什么 简单的说,你可以用js搞定客户端.服务端的开发.另外,客户端.服务端的界限被极 ...
- Meteor入门介绍
Meteor是什么 基于nodejs的实时web APP开发框架. Meteor能带来什么 简单的说,你可以用js搞定客户端.服务端的开发.另外,客户端.服务端的界限被极大的模糊.客户端的界面跟服务端 ...
- Meteor.js异步全解
翻译来源: http://phucnguyen.info/blog/everything-you-need-to-know-about-async-meteor/ posted in Web Deve ...
随机推荐
- System类与两种输入流
1.System类对I/O的支持系统输出System.out.println 是利用了I/O流的模式完成的.实际是打印流PrintStream对象 System类中定义了三个操作的常量 1.标准/系统 ...
- 【转】C#的版本
这年头啥东东都喜欢过段时间整个啥新版本出来.汽车,手机如此,软件就更是如此了啊.比如啥Iphone 4,Iphone 5,Windows 8,Oracle 12C,SQL Server 2010. 版 ...
- OpenCV2:总结篇 工具方法函数
一.简介 OpenCV提供了一些工具方法函数来辅助完成图像运算 二.时间相关 1.getTickCount()和getTickFrequency() double tTime; tTime = (do ...
- day13 函数模块之序列化 random 模块 os模块 sys模块 hashlib模块 collections模块
json import json dic = {'k1':'v1','k2':'v2','k3':'v3'} str_dic = json.dumps(dic) #序列化:将一个字典转换成一个字符串 ...
- viewport移动端适配，读文笔记
文章地址: viewport移动端适配 笔记: 移动端适配目的: 希望在屏幕尺寸大小不同的手机上进行访问页面时,页面显示的效果能合理的展示,我们期望的是在手机屏幕较大时显示的内容比较大一些,手机屏幕小 ...
- Android流行界面结构——Fragment通过ViewPager（带指示器）嵌套Fragment结构的创建方法详解
原创文章,转载请注明出处http://www.cnblogs.com/baipengzhan/p/6287213.html 当前Android流行界面结构的一种——Fragment通过ViewPage ...
- DB2数据库在线备份还原
DB2在线备份设置方法: 第一步:开启归档日志 db2 update db cfg for TEST_DB using logretain on 第二步:重启数据库 第三步:进行一次离线备份 db2 ...
- python读取excel学习(1)
#coding=gbk #coding=utf-8 import xlrd table = xlrd.open_workbook(r'E:\test.xlsx') #sheet = table.she ...
- 条款13：以对象管理资源（use objects to manage resources）
NOTE: 1.为防止资源泄漏,请使用RAII对象,它们在构造函数中获得资源并在析构函数中释放资源. 2.两个常被使用的RAII classes 分别是 trl::shared_ptr 和 auto_ ...
- Python旅途——函数(1)
函数 简介 到目前为止,我们一直所接触的都是属于面向过程编程,这样的代码会降低代码的可读性,因此引入了函数式编程,在后面我们还会学到面向对象编程. 函数式编程 函数本质:将N行代码拿到别处,并给他起个 ...