บทความนี้อธิบายถึงการใช้งานของคณะผู้แทนเหตุการณ์ JavaScript แบ่งปันสำหรับการอ้างอิงของคุณ การวิเคราะห์เฉพาะมีดังนี้:
1. คลิกที่ส่วนใดส่วนหนึ่งของหน้าเพื่อทริกเกอร์เหตุการณ์
สร้างไฟล์ script1.js
คัดลอกรหัสดังนี้: (ฟังก์ชัน () {
EventUtuity.Addevent (เอกสาร, "คลิก", ฟังก์ชั่น (evt) {
การแจ้งเตือน ('สวัสดี');
-
-
ส่วนหน้า
คัดลอกรหัสดังนี้: <head>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8"/>
<title> </title>
</head>
<body>
<script src = "eventutility.js"> </script>
<script src = "script1.js"> </script>
</body>
</html>
ผลลัพธ์ผลลัพธ์: การคลิกที่หน้าใดหน้าหนึ่งจะปรากฏขึ้น
อย่างไรก็ตามบางครั้งเราต้องการคลิกที่องค์ประกอบในเอกสารเพื่อทริกเกอร์เหตุการณ์
2. ใช้ตัวแทนเพื่อทริกเกอร์เหตุการณ์
เพิ่มแท็กไปยังหน้า
คัดลอกรหัสดังนี้: <head>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8"/>
<title> </title>
</head>
<body>
<div>
<p> <a href = "#"> คลิกฉัน </a> </p>
</div>
<script src = "eventutility.js"> </script>
<script src = "script1.js"> </script>
</body>
แก้ไข script1.js เป็น:
คัดลอกรหัสดังนี้: (ฟังก์ชัน () {
EventUtuity.Addevent (เอกสาร, "คลิก", ฟังก์ชั่น (evt) {
// รับวัตถุคลิก
var target = eventutility.getTarget (EVT);
// รับชื่อแท็กของวัตถุคลิก
var tagname = target.tagname;
// ถ้าแท็กเป็น
if (tagname === "a") {
การแจ้งเตือน ("คลิกฉัน");
// บล็อกพฤติกรรมเริ่มต้นของลิงก์
ENVISTUTIVILY.PreventDefault (EVT);
-
-
-
ผลลัพธ์ผลลัพธ์: กล่องจะปรากฏขึ้นเฉพาะในกรณีที่คุณคลิกแท็ก A บนหน้า
ประโยชน์ข้างต้นคือ: ไม่ว่าจะมีการเพิ่มองค์ประกอบแท็กลงในเอกสารจำนวนเท่าใดแท็กทั้งหมดมีความสามารถในการเรียกใช้ นี่คือการว่าจ้างของเหตุการณ์ เราต้องการลงทะเบียนกิจกรรมสำหรับองค์ประกอบเด็ก แต่ก่อนอื่นเราลงทะเบียนกิจกรรมด้วยองค์ประกอบหลักขององค์ประกอบลูก ด้วยวิธีนี้องค์ประกอบใด ๆ ที่ถูกเพิ่มแบบไดนามิกและประเภทเดียวกับองค์ประกอบลูกจะลงทะเบียนภายในองค์ประกอบหลัก
หากเราลงทะเบียนกิจกรรมกับองค์ประกอบเด็กและเพิ่มองค์ประกอบแบบไดนามิกของประเภทเดียวกันกับองค์ประกอบของเด็กในเอกสารเราต้องลงทะเบียนกิจกรรมสำหรับองค์ประกอบลูกเหล่านี้ที่เพิ่งเพิ่มแบบไดนามิก
นอกจากนี้การมอบหมายกิจกรรมยังใช้ประโยชน์จาก "Event Bubbles" ได้เป็นอย่างดี เมื่อคลิกที่องค์ประกอบเด็กตาม "Event Bubble" องค์ประกอบหลักขององค์ประกอบลูกจะจับเหตุการณ์คลิกและกระตุ้นวิธีการของตัวเอง
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน