Sự khác biệt chính xác giữa thuộc tính currentTarget và thuộc tính đích trong javascript

Question

Bất kỳ ai có thể cho tôi biết sự khác biệt chính xác giữa các thuộc tính currentTarget và target trong các sự kiện Javascript với ví dụ và thuộc tính nào được sử dụng trong trường hợp nào?

Answer 1

Về cơ bản, events bubble theo mặc định nên sự khác biệt giữa hai là:

• target là yếu tố phát động sự kiện (ví dụ, người dùng nhấp vào)
• currentTarget là yếu tố mà người nghe sự kiện được gắn vào.

Xem giải thích đơn giản về số blog post này.

Answer 2

target = yếu tố kích hoạt sự kiện.

currentTarget = yếu tố lắng nghe sự kiện.

Answer 3

Nếu điều này không được gắn bó, hãy thử này:

hiện trong currentTarget đề cập đến hiện tại. Đó là mục tiêu gần đây nhất bắt được sự kiện sôi nổi từ nơi khác.

Answer 4

dụ Minimal

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 
 
    <div id="2">2 
 
    </div> 
 
</div> 
 
<div id="result"> 
 
    <div>result:</div> 
 
</div>

Khi 2 được nhấp và niêm yết để trên 1, kết quả là:

target: 2 
currentTarget: 1 

vì trong trường hợp đó:

• 2 là yếu tố có nguồn gốc sự kiện
• 1 là yếu tố mà nghe sự kiện

Answer 5

event.target là nút mà từ đó sự kiện này có nguồn gốc, tức là. bất cứ nơi nào bạn đặt trình lắng nghe sự kiện của bạn (trên đoạn hoặc span), event.target tham chiếu đến nút (nơi người dùng nhấp vào).

event.currentTarget, ngược lại, đề cập đến nút mà trình nghe sự kiện hiện tại được đính kèm. I E. nếu chúng ta gắn trình nghe sự kiện của chúng ta vào nút đoạn, thì event.currentTarget đề cập đến đoạn trong khi event.target vẫn đề cập đến span. Lưu ý: nếu chúng ta cũng có một trình lắng nghe sự kiện trên cơ thể, thì đối với event-listener này, event.currentTarget đề cập đến body (tức là sự kiện được cung cấp làm đầu vào cho event-listerners được cập nhật mỗi khi event xảy ra một nút).

Answer 6

<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>

Nếu nhấp chuột vào thẻ P trong đoạn code trên sau đó bạn sẽ nhận được ba cảnh báo, và nếu bạn nhấn vào thẻ div, bạn sẽ nhận được hai cảnh báo và cảnh báo duy nhất trên cách nhấn vào hình thức nhãn. Và bây giờ nhìn thấy đoạn mã sau,

<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>

Chúng tôi chỉ cần loại bỏ onclick từ P và hình thức thẻ và bây giờ khi chúng ta nhấp vào chúng trên thẻ P, chúng tôi chỉ nhận được một cảnh báo:

[ đối tượng HTMLParagraphElement] [đối tượng HTMLDivElement]

Đây event.target là [object HTMLParagraphElement] và event.curentTarget là [object HTMLDivElement]: Vì vậy

event.target là nút mà từ đó sự kiện này có nguồn gốc, và event.currentTarget, trên toàn ngược lại, đề cập đến nút trên mà hiện tại sự kiện người nghe là attached.To biết thêm see bubbling

Ở đây chúng tôi đã nhấp vào thẻ P nhưng chúng tôi không có người nghe trên P nhưng trên div phần tử gốc của nó.