Sự khác biệt giữa e.target và e.cienTarget

Tôi không hiểu sự khác biệt, cả hai đều giống nhau nhưng tôi đoán là không.

Bất kỳ ví dụ về thời điểm sử dụng cái này hay cái kia sẽ được đánh giá cao.

Ben hoàn toàn chính xác trong câu trả lời của mình - vì vậy hãy ghi nhớ những gì anh ấy nói. Những gì tôi sắp nói với bạn không phải là một lời giải thích đầy đủ, nhưng đó là một cách rất dễ để nhớ cách thức e.target, e.currentTargethoạt động liên quan đến các sự kiện chuột và danh sách hiển thị:

e.target= Thứ dưới chuột (như ben nói ... thứ kích hoạt sự kiện). e.currentTarget= Điều trước dấu chấm ... (xem bên dưới)

Vì vậy, nếu bạn có 10 nút bên trong clip có tên ví dụ là "btns" và bạn làm:

btns.addEventListener(MouseEvent.MOUSE_OVER, onOver);
// btns = the thing before the dot of an addEventListener call
function onOver(e:MouseEvent):void{
  trace(e.target.name, e.currentTarget.name);
}

e.targetsẽ là một trong 10 nút và e.currentTargetsẽ luôn là clip "btns".

Điều đáng chú ý là nếu bạn thay đổi MouseEvent thành ROLL_OVER hoặc đặt thuộc tính btns.mouseChildrenthành false e.targetvà e.currentTargetcả hai sẽ luôn là "btns".

e.targetlà những gì kích hoạt bộ điều phối sự kiện để kích hoạt và e.currentTargetlà những gì bạn đã gán cho người nghe của bạn.

e.currentTargetluôn luôn là yếu tố mà sự kiện thực sự bị ràng buộc làm. e.targetlà yếu tố mà sự kiện bắt nguồn từ đó, vì vậy e.targetcó thể là con của e.currentTargethoặc e.targetcó thể là === e.currentTarget, tùy thuộc vào cách đánh dấu của bạn được cấu trúc.

Tôi thích câu trả lời trực quan.

Khi bạn bấm vào #btn, hai trình xử lý sự kiện được gọi và chúng xuất ra những gì bạn nhìn thấy trong hình.

Demo tại đây: https://jsfiddle.net/ujhe1key/

Đáng lưu ý rằng event.target có thể hữu ích, ví dụ, khi sử dụng một trình nghe duy nhất để kích hoạt các hành động khác nhau. Giả sử bạn có sprite "menu" điển hình với 10 nút bên trong, vì vậy thay vì thực hiện:

menu.button1.addEventListener(MouseEvent.CLICK, doAction1);
menu.button2.addEventListener(MouseEvent.CLICK, doAction2);
etc...

Bạn chỉ có thể làm:

menu.addEventListener(MouseEvent.CLICK, doAction);

Và kích hoạt một hành động khác trong doAction (sự kiện) tùy thuộc vào event.target (sử dụng thuộc tính tên của nó, v.v ...)

làm một ví dụ:

var body = document.body,
    btn = document.getElementById( 'id' );
body.addEventListener( 'click', function( event ) {
    console.log( event.currentTarget === body );
    console.log( event.target === btn );
}, false );

khi bạn nhấp vào 'btn' và 'true' và 'true' sẽ xuất hiện!

e.cienTarget sẽ luôn trả về thành phần mà trình lắng nghe sự kiện được thêm vào.

Mặt khác, e.target có thể là chính thành phần hoặc bất kỳ đứa trẻ trực tiếp hoặc cháu nội hoặc cháu lớn và những người đã nhận sự kiện này. Nói cách khác, e.target trả về thành phần nằm trên cùng trong hệ thống phân cấp Danh sách hiển thị và phải nằm trong cấu trúc phân cấp con hoặc chính thành phần đó.

Một lần sử dụng có thể là khi bạn có một vài Hình ảnh trong Canvas và bạn muốn kéo Hình ảnh bên trong thành phần trừ Canvas. Bạn có thể thêm một trình nghe trên Canvas và trong trình nghe đó, bạn có thể viết đoạn mã sau để đảm bảo rằng Canvas sẽ không bị kéo.

function dragImageOnly(e:MouseEvent):void
{
    if(e.target==e.currentTarget)
    {
        return;
     }
     else
     {
        Image(e.target).startDrag();
     }
}

target  is the element that triggered the event (e.g., the user clicked on)

currenttarget is the element that the event listener is attached to.

• e.target là yếu tố, mà bạn bấm vào
• e.cienTarget là phần tử có thêm trình nghe sự kiện.

Nếu bạn nhấp vào phần tử con của nút, tốt hơn là sử dụng currentTarget để phát hiện các thuộc tính nút, trong CH đôi khi vấn đề sử dụng e.target.

e.cienTarget là phần tử (cha mẹ) trong đó sự kiện được đăng ký, e.target là nút (con) nơi sự kiện được trỏ đến.