ดาวตก - เหตุการณ์

ในบทนี้เราจะเรียนรู้วิธีการใช้งาน tag, class และ idเป็นตัวเลือกเหตุการณ์ การทำงานกับเหตุการณ์ค่อนข้างตรงไปตรงมา

มาสร้างองค์ประกอบสามอย่างในเทมเพลต HTML คนแรกคือpอันที่สองคือ myClass คลาสและสุดท้ายคือ myId id.

eorApp.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เหตุการณ์. เหล่านี้เป็นselectors ที่เรากล่าวถึงข้างต้น

eorApp.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 - ตามตัวอย่างด้านบน