Meteor事件(Events)

/ / Meteor事件(Events)

在本章中,无涯教程将学习如何使用 tag,class 和 id 作为事件选项器,处理事件非常简单。

让无涯教程在HTML模板中创建三个元素。第一个是 p ,第二个是 myClass 类,最后一个是 myId id。

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文件中,无涯教程为上面创建的三个元素设置了三个事件。您可以看到,无涯教程只是在 click 事件之后添加了 p,.myClass 和 #myId 。

meteorApp.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 按钮。无涯教程将获得以下控制台日志。

Meteor Events Log

按照上面的示例,无涯教程可以使用所有其他JavaScript事件-click,dbclick,contextmenu,mousedown,mouseup,mouseover,mouseout,mousemove。

祝学习愉快! (发现内容有误?请选中要编辑的内容 -> 右键 -> 修改 -> 提交!帮助我们改进教程质量)

精选教程推荐

👇 以下精选教程可能对您有帮助,拓展您的技术视野

大模型安全实战课 -〔赵帅〕

徐昊 · AI 时代的软件工程 -〔徐昊〕

结构沟通力 -〔李忠秋〕

打造爆款短视频 -〔周维〕

Python自动化办公实战课 -〔尹会生〕

A/B测试从0到1 -〔张博伟〕

人人都用得上的写作课 -〔涵柏〕

算法面试通关40讲 -〔覃超〕

邱岳的产品手记 -〔邱岳〕

📝 好记忆不如烂笔头,留下您的学习笔记吧!

暂无学习笔记,成为第一个分享的人吧!

您的笔记将帮助成千上万的学习者