home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

คุณสมบัติ currentTarget ของ Event: อิลิเมนต์ที่มี Event Listener

คุณสมบัติ event.currentTarget คืออะไร?

คุณสมบัติ event.currentTarget ใน HTML DOM ใช้สำหรับ อ้างอิงถึงอิลิเมนต์ที่มี Event Listener ผูกอยู่** (คืออิลิเมนต์ที่เรา addEventListener ไป) แตกต่างจาก event.target ที่อ้างอิงถึงอิลิเมนต์ที่กดจริง (อาจเป็นลูกของ currentTarget)

ไวยากรณ์ (Syntax)

event.currentTarget

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<body>
  <h2>ดูอิลิเมนต์ที่มี Event Listener</h2>
  <p onclick="showCurrentTarget(event)" style="background: #eee; padding: 20px;">
    คลิกที่นี่ (หรือที่ข้อความใน p) เพื่อดู currentTarget
    <br><span style="color: red;">(span ภายใน p)</span>
  </p>
  <script>
    function showCurrentTarget(event) {
      alert("currentTarget (มี Listener): " + event.currentTarget.tagName + 
            "\ntarget (ที่คลิกจริง): " + event.target.tagName);
    }
  </script>
</body>
</html>

ผลลัพธ์

  • คลิกที่ข้อความ "คลิกที่นี่..." → currentTarget: P, target: P
  • คลิกที่ข้อความ "(span ภายใน p)" → currentTarget: P, target: SPAN

ความแตกต่าง currentTarget vs target

คุณสมบัติคำอธิบาย
event.currentTargetอิลิเมนต์ที่มี Event Listener ผูกอยู่ (this ใน handler)
event.targetอิลิเมนต์ที่ก่อให้เกิดเหตุการณ์จริง (ลึกที่สุด)
event.target === event.currentTargettrue = คลิกที่อิลิเมนต์ตัว Listener เอง

การใช้งานจริง

// ใน Event Handler
element.addEventListener('click', function(event) {
  // this === event.currentTarget
  console.log('Listener attached to:', this.tagName);
  console.log('Actually clicked:', event.target.tagName);
  
  // ใช้ currentTarget เพื่อเข้าถึงข้อมูลของอิลิเมนต์ที่ผูก Listener
  var dataId = event.currentTarget.dataset.id;
});