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 ...
随机推荐
- 样式化复选框(Styling Checkbox)
原理:https://www.tuicool.com/articles/y67jee 表现:http://www.freejs.net/demo/381/index.html https://www. ...
- render_to_response()
render_to_response('模板名称',字典) 字典:第二个参数必须是为该模板创建context时所使用的字典,如果不提供第二个参数,render_response()使用一个空字典
- vue 数据没有驱动视图？
Part.1 问题 数据改变,视图却没有根据数据而改变. 原因在于,数据并不在 vue 监听范围之内,vue 只对事先在 data 中声明的变量丶对象等类型数据进行监听 Part.2 例子 < ...
- Spring_对缓存的支持
使用SpringBoot开启缓存分为两步: 开启基于注解的缓存 标注缓存注解即可 如上就是一个简单的缓存示例 默认使用的是ConcurrentHashMap组件用来缓存的 package ustc.a ...
- [JOYOI] 1061 Mobile Service
题目限制 时间限制 内存限制 评测方式 题目来源 1000ms 131072KiB 标准比较器 Local 题目描述 一个公司有三个移动服务员.如果某个地方有一个请求,某个员工必须赶到那个地方去(那个 ...
- Python 2 和 Python 3 主要区别有哪些（1）
Guido(Python之父,仁慈的独裁者)在设计 Python3 的过程中,受一篇文章 “Python warts” 的影响,决定不向后兼容,否则无法修复大多数缺陷.---摘录自<流畅的Pyt ...
- 数据结构( Pyhon 语言描述 ) — — 第4章：数据和链表结构
数据结构是表示一个集合中包含的数据的一个对象 数组数据结构 数组是一个数据结构 支持按照位置对某一项的随机访问,且这种访问的时间是常数 在创建数组时,给定了用于存储数据的位置的一个数目,并且数组的长度 ...
- C语言学习13
快速排序 //快速排序 #include <stdio.h> void quicksort(int a[], int left, int right); void main() { ] = ...
- LINUX常用文件说明
一.网络配置 1.修改主机名 /etc/sysconfig/network或/etc/hosts 2.开启或关闭网卡 ifconfig eth0 down/up 3.linuxa下查看一个网卡绑定的所 ...
- python之Gui编程事件绑定 2014-4-8
place() 相对定位与绝对定位 相对定位 拖动会发生变化 绝对定位不会from Tkinter import *root = Tk()# Absolute positioningButton(ro ...