使用事件是非常简单的。我们将学习如何使用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. 闲着蛋疼没事干,写个Mac端的Kcptun Client管理器

    原理: 执行一行脚本 输入服务器地址,端口,密码等做了图形化编辑 可以控制Kcptun是否正在运行 App已上传github https://github.com/nicky2k8/KcptunCli ...

  2. Python3基础教程(二十)—— flask介绍

    基本概念 什么是Flask? Flask 是一个 web 框架.也就是说 Flask 为你提供工具,库和技术来允许你构建一个 web 应用程序.这个 web 应用程序可以是一些 web 页面.博客.w ...

  3. Linux-RedHat7.2 使用CentOS源

    -- 查看yum rpm -qa |grep yum --卸载yum rpm -qa | grep yum | xargs rpm -e --nodeps --拷贝centos系统yum工具安装程序到 ...

  4. easyui权限管理

    在easyui上实现权限的管理 所谓权限:指的是系统中的资源,资源包括菜单资源(学习情况报表,账号审核...)以及按钮资源所谓角色:指的是系统中的权限集合(每一个角色对应着哪些权限集合) 1.一星权限 ...

  5. 设计模式:命令模式(Command Pattern)

    问题 某个类中需要定义一个方法,该方法要实现的功能不确定的,需要等到程序执行该方法的时候才确定下来. 例如:定义一个计算数组的方法,可能需要遍历输出数组,也有可能是需要对数组中元素求和. 解决方案 按 ...

  6. Perl语言入门: 斜线不是元字符,所以在不作为分隔符时不需要加上反斜线。

    Perl语言入门: 斜线不是元字符,所以在不作为分隔符时不需要加上反斜线.

  7. luogu P1455 搭配购买

    题目描述 明天就是母亲节了,电脑组的小朋友们在忙碌的课业之余挖空心思想着该送什么礼物来表达自己的心意呢?听说在某个网站上有卖云朵的,小朋友们决定一同前往去看看这种神奇的商品,这个店里有n朵云,云朵已经 ...

  8. vs编译应用程序不依赖运行vs环境

    控制台应用程序不依赖VS运行环境就可以运行的设置: 1,使用release模式编译 2,项目属性中,“C/C++”,“代码生成”中的运行库改为“多线程(/MT)” 3,项目属性中,“链接器”,“系统” ...

  9. 最近公共祖先-三(RMQ-ST)

    描述 上上回说到,小Hi和小Ho使用了Tarjan算法来优化了他们的"最近公共祖先"网站,但是很快这样一个离线算法就出现了问题:如果只有一个人提出了询问,那么小Hi和小Ho很难决定 ...

  10. [LUOGU] P3004 [USACO10DEC]宝箱Treasure Chest

    第一眼:区间DP,可以瞎搞 f[i][j]=max(sum(i,j)-f[i+1][j],sum(i,j)-f[i][j-1]) 提出来就是f[i][j]=sum(i,j)-min(f[i+1][j] ...