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

Ai đó có thể vui lòng cho tôi biết sự khác biệt chính xác giữa currentTargetvà targetthuộc tính trong các sự kiện Javascript với ví dụ và thuộc tính nào được sử dụng trong kịch bản nào không?

Về cơ bản, bong bóng sự kiện theo mặc định, do đó, sự khác biệt giữa hai là:

• target là yếu tố kích hoạt 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 một lời giải thích đơn giản trên bài đăng blog này .

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

currentTarget = phần tử có người nghe sự kiện.

Ví dụ runnable tối thiểu

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>

Nếu bạn nhấp vào:

2 click me as well

sau đó 1lắng nghe nó và thêm vào kết quả:

target: 2
currentTarget: 1

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

• 2 là yếu tố khởi nguồn sự kiện
• 1 là yếu tố lắng nghe sự kiện

Nếu bạn nhấp vào:

1 click me

thay vào đó, kết quả là:

target: 1
currentTarget: 1

Đã thử nghiệm trên Chromium 71.

Nếu điều này không dính, hãy thử điều này:

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

<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 vào thẻ P trong mã ở trên thì bạn sẽ nhận được ba cảnh báo và nếu bạn nhấp vào thẻ div, bạn sẽ nhận được hai cảnh báo và một cảnh báo khi nhấp vào thẻ biểu mẫu. Và bây giờ hãy xem đ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>

[đối tượng HTMLPar ĐoạnEuity] [đối tượng HTMLDivEuity]

Ở đây event.target là [object HTMLPar ĐoạnEuity] và event.curentTarget là [object HTMLDivEuity]: Vì vậy

event.target là nút mà từ đó sự kiện bắt nguồn và event.civerseTarget, ngược lại, đề cập đến nút mà trình nghe sự kiện hiện tại được đính kèm. Để biết thêm xem bong bóng

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

event.target là nút mà từ đó sự kiện bắt nguồn, nghĩa là. bất cứ nơi nào bạn đặt trình nghe sự kiện của bạn (trên đoạn văn hoặc nhịp), event.target đề cập đến nút (nơi người dùng nhấp vào).

Ngược lại , event.cienTarget đề 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 tôi đính kèm trình lắng nghe sự kiện của chúng tôi vào nút đoạn, thì event.cienTarget đề cập đến đoạn trong khi event.target vẫn đề cập đến span. Lưu ý: rằng 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 trình lắng nghe sự kiện này, event.cienTarget đề cập đến phần thân (tức là sự kiện được cung cấp làm đầu vào cho trình liệt kê sự kiện được cập nhật mỗi khi sự kiện nổi lên một nút).