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 ...
随机推荐
- uva1228 Integer Transmission
这道题思维很灵活.也有点套路的意思. 首先规定0,1分别按照原来的顺序接收,只是01换位.这样简化了思维.(否则并不会有更优结果它.,比较好想)最大值和最小值可以贪心得到.那么接下来就是给定一个整数P ...
- PHP 中空字符串介绍0、null、empty和false之间的关系
0是数字,是empty,是false,不是null,值相当于空字符串,但类型不是字符串,去空格或强制转换为字符串型时不等于空字符串 ""的值相当于0,是empty,是空字符串,是f ...
- QTreeWidgetItem封装
#include "qtreewighthelper.h" QTreeWidgetItem* AddQTreeWidgetItemChild(QTreeWidgetItem* pa ...
- Java中的BIO，NIO，AIO分别是什么
BIO:同步并阻塞,服务器实现模式为一个连接一个线程,即客户端有连接请求时服务器端就需要启动一个线程进行处理,如果这个连接不做任何事情会造成不必要的线程开销,当然可以通过线程池机制改善.BIO方式适用 ...
- ç7—UIViewController
UIViewController继承了UIResponder,而UIResponder继承了NSObject,UIViewController是所有视图控制器的父类. 在MVC模式中,UIViewCo ...
- svn上传项目
1.桌面右键单击 2.进行项目导入 3.选择项目所在目录 4.
- MySQL数据类型与操作
内容提要: 建表完整语法规范(create table 表格(字段名1 类型 (宽度) 约束条件)) MySQL数据库数据类型(整型.浮点型.字符类型(char与varchar).日期类型.枚举与集合 ...
- day22 02 面向对象的交互
day22 02 面向对象的交互 一.三种编程方式 1.面向过程编程:核心是过程,流水线式思维 优点:极大降低了写程序的复杂程度,只需要顺着要执行的步骤,堆叠代码即可 缺点:一套流水线或者流程就用来解 ...
- 使用scrapy爬取suning
# -*- coding: utf-8 -*- import scrapy from copy import deepcopy class SuSpider(scrapy.Spider): name ...
- 【HIHOCODER 1575】 两个机器人（BFS）
描述 一个N × M的2D迷宫中有两个机器人.机器人A在迷宫左上角,只能向右或向下移动:机器人B在迷宫右下角,只能向左或向上移动.机器人不能移动到迷宫外.此外,由于奇怪的同步机制,这两个机器人只能同时 ...