Hướng dẫn currenttarget trong javascript

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?

• javascript

157 hữu ích 1 bình luận 56k xem chia sẻ

answer

222

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 .

222 hữu ích 5 bình luận chia sẻ

answer

43

target = phần tử kích hoạt sự kiện.

currentTarget = phần tử lắng nghe sự kiện.

43 hữu ích 0 bình luận chia sẻ

answer

13

Ví dụ runnable tối thiểu

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

 id="1">1 click me
   id="2">2 click me as well

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.

13 hữu ích 0 bình luận chia sẻ

answer

9

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.

9 hữu ích 0 bình luận chia sẻ

answer

3

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

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,

FORM
   onclick="fun(event)">DIV
    
P

Chúng tôi vừa xóa onclick khỏi thẻ P và biểu mẫu và bây giờ khi chúng tôi nhấp vào thẻ P, chúng tôi chỉ nhận được một cảnh báo:

[đố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.cienTarget, 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ó.

3 hữu ích 0 bình luận chia sẻ

answer

1

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

1 hữu ích 0 bình luận chia sẻ

Đăng nhập để trả lời câu hỏi

Có thể bạn quan tâm