使用事件是非常简单的。我们将学习如何使用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. 页面定制CSS代码

    博客皮肤:SimpleMemory .catListTitle { margin-top: 21px; margin-bottom: 10.5px; text-align: left; border- ...

  2. es 集群部署

    下载 [root@localhost ~]# wget https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-6.5.1 ...

  3. ROI(Region of Interesting)

    ROI(region of interest),感兴趣区域.机器视觉.图像处理中,从被处理的图像以方框.圆.椭圆.不规则多边形等方式勾勒出需要处理的区域,称为感兴趣区域,ROI.在Halcon.Ope ...

  4. webpack、node、npm之间的关系

    webpack能够把.vue后缀名的文件打包成浏览器能够识别的js 而这个.vue文件装换需要打包器vue-loader 这个vue-loader打包器是可以从npm上面下载(npm上面有很多资源包) ...

  5. 2018美赛准备之路——Matlab基础——基本运算符号表示

    π pi ln(x) log(x)   lg(x) log10(x) log2(x) log2(x) 根号 sqrt(x) x的y次方 x^y e的y次方 exp(y)    

  6. UVa-133-救济金发放

    这题的话,我们首先对于移动函数可以知道,因为只是顺逆的关系,也就是加一或者减一,所以我们每次移动的时候,都补上一个小于n的最大整数,然后取模,这样就不会有负数,而且加之后的结果不会超过2*n,所以我们 ...

  7. Http请求封装（对HttpClient类的进一步封装，使之调用更方便。另外，此类管理唯一的HttpClient对象，支持线程池调用，效率更高）

    package com.ad.ssp.engine.common; import java.io.IOException; import java.util.ArrayList; import jav ...

  8. python3.6以上 asyncio模块的异步编程模型 async await语法

    这是python3.6以上版本的用法,本例是python3.7.2编写使用asyncio模块的异步编程模型,生产这消费者,异步生产,用sleep来代替IO等待使用async和await语法来进行描述a ...

  9. htmlpurifier的使用

    什么是htmlpurifier?? HTML Purifier是一个可以用来移除所有恶意代码(XSS),而且还能确保你的页面遵循W3C的标准规范的PHP类库. 在php里解决XSS最简单的方法是使用h ...

  10. HTML中复选框的使用方法

    <select id="question"> {# 常见问题.ajax用editor.html('1231254')填充#} <option value=&quo ...