ความแตกต่างที่แน่นอนระหว่างคุณสมบัติ currentTarget และคุณสมบัติเป้าหมายในจาวาสคริปต์คืออะไร

ใครช่วยเล่าความแตกต่างที่แน่นอนระหว่างcurrentTargetและtargetคุณสมบัติในเหตุการณ์ Javascript ด้วยตัวอย่างและคุณสมบัติที่ใช้ในสถานการณ์ใดได้บ้าง

โดยทั่วไปแล้วเหตุการณ์ที่เกิดขึ้นจะทำให้เกิดฟองโดยค่าเริ่มต้นดังนั้นความแตกต่างระหว่างทั้งสองคือ:

• target เป็นองค์ประกอบที่ทำให้เกิดเหตุการณ์ (เช่นผู้ใช้คลิก)
• currentTarget เป็นองค์ประกอบที่แนบเหตุการณ์ฟัง

ดูคำอธิบายง่ายๆเกี่ยวกับการโพสต์บล็อกนี้

target = องค์ประกอบที่เรียกใช้เหตุการณ์

currentTarget = องค์ประกอบที่มีฟังเหตุการณ์

ตัวอย่างที่เรียกใช้น้อยที่สุด

window.onload = function() {
  var resultElem = document.getElementById('result')
  document.getElementById('1').addEventListener(
    'click',
    function(event) {
      resultElem.innerHTML += ('<div>target: ' + event.target.id + '</div>')
      resultElem.innerHTML += ('<div>currentTarget: ' + event.currentTarget.id + '</div>')
    },
    false
  )
  document.getElementById('2').dispatchEvent(
          new Event('click', { bubbles:true }))
}

<div id="1">1 click me
  <div id="2">2 click me as well</div>
</div>
<div id="result">
  <div>result:</div>
</div>

หากคุณคลิกที่:

2 click me as well

จากนั้น1ฟังและผนวกเข้ากับผลลัพธ์:

target: 2
currentTarget: 1

เพราะในกรณีนั้น:

• 2 เป็นองค์ประกอบที่ทำให้เกิดเหตุการณ์
• 1 เป็นองค์ประกอบที่ฟังเหตุการณ์

หากคุณคลิกที่:

1 click me

ผลลัพธ์คือ:

target: 1
currentTarget: 1

ทดสอบกับ Chromium 71

หากสิ่งนี้ไม่เกาะติดลองสิ่งนี้:

กระแสในcurrentTargetหมายถึงปัจจุบัน มันเป็นเป้าหมายล่าสุดที่จับเหตุการณ์ที่เกิดขึ้นจากที่อื่น

<style>
  body * {
    margin: 10px;
    border: 1px solid blue;
  }
</style>

<form onclick="alert('form')">FORM
  <div onclick="alert('div')">DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>

หากคลิกที่แท็ก P ในโค้ดด้านบนคุณจะได้รับการแจ้งเตือนสามครั้งและหากคุณคลิกที่แท็ก div คุณจะได้รับการแจ้งเตือนสองรายการและการแจ้งเตือนเพียงครั้งเดียวเมื่อคลิกแท็กแบบฟอร์ม และตอนนี้ดูรหัสต่อไปนี้

<style>
  body * {
    margin: 10px;
    border: 1px solid blue;
  }
</style>
<script>
function fun(event){
  alert(event.target+" "+event.currentTarget);
}

</script>

<form>FORM
  <div onclick="fun(event)">DIV
    <p>P</p>
  </div>
</form>

[วัตถุ HTMLParagraphElement] [วัตถุ HTMLDivElement]

นี่คือ event.target คือ [object HTMLParagraphElement] และ event.curentTarget คือ [object HTMLDivElement]: ดังนั้น

event.target เป็นโหนดที่เหตุการณ์เกิดขึ้นและ event.currentTarget ตรงกันข้ามหมายถึงโหนดที่มีการแนบ listener เหตุการณ์ปัจจุบันไว้หากต้องการทราบเพิ่มเติมดู bubbling

ที่นี่เราคลิกที่แท็ก P แต่เราไม่มีฟังบน P แต่ในองค์ประกอบหลักของ div

event.targetเป็นโหนดที่เกิดเหตุการณ์ขึ้นเช่น ทุกที่ที่คุณวางฟังเหตุการณ์ของคุณ (ในย่อหน้าหรือช่วง), event.target หมายถึงโหนด (ที่ผู้ใช้คลิก)

event.currentTargetตรงกันข้ามอ้างถึงโหนดที่ฟังเหตุการณ์ปัจจุบันถูกแนบ กล่าวคือ ถ้าเราแนบ listener เหตุการณ์ของเราบนโหนด node แล้ว event.currentTarget อ้างถึงย่อหน้าในขณะที่ event.target ยังคงอ้างอิงถึง span หมายเหตุ: หากเรามีผู้ฟังเหตุการณ์ในเนื้อหาดังนั้นสำหรับ event-listener นี้ event.currentTarget อ้างถึงเนื้อหา (เช่นเหตุการณ์ที่ให้ไว้เป็นอินพุตไปยัง event-listerners จะอัปเดตแต่ละครั้งที่เหตุการณ์เกิดขึ้นหนึ่งโหนด)