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 currentTarget
và target
thuộ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?
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 }]]
}
1 click me
2 click me as well
result:
Nếu bạn nhấp vào:
2 click me as well
sau
đó 1
lắ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ện1
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
body * {
margin: 10px;
border: 1px solid blue;
}
FORM
DIV
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,
body * {
margin: 10px;
border: 1px solid blue;
}
function fun[event]{
alert[event.target+" "+event.currentTarget];
}
FORM
DIV
P
Chúng tôi vừa xóa title 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