e.target과 e.currentTarget의 차이점

나는 그 차이를 이해하지 못한다. 둘 다 동일하게 보이지만 그렇지 않다고 생각한다.

어느 쪽을 사용할 것인지에 대한 모든 예가 이해 될 것이다.

벤은 자신의 대답이 완전히 정확하므로 자신이 말하는 것을 명심하십시오. 내가 당신에게에 대해이야하는 것은 자세한 설명은 아니지만, 어떻게 기억하는 아주 쉬운 방법 e.target, e.currentTarget작업 마우스 이벤트 및 표시 목록과 관련을 :

e.target= 마우스 아래에있는 것 (벤이 말한 것처럼 ... 이벤트를 유발하는 것). e.currentTarget= 점 앞에있는 것 ... (아래 참조)

따라서 인스턴스 이름이 "btns"인 클립 안에 10 개의 버튼이 있고

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.target버튼 10 개 중 하나이며 e.currentTarget항상 "btns"클립이됩니다.

그것의 가치가 지적 당신은 ROLL_OVER로 된 MouseEvent를 변경하거나 속성을 설정하면 btns.mouseChildrenfalse로, e.target그리고 e.currentTarget모두 항상 "btns"입니다.

e.target이벤트 디스패처가 트리거되도록 트리거하고 e.currentTarget리스너를 할당 한 것입니다.

e.currentTarget항상 이벤트가 실제로 바인딩 된 요소입니다. e.target은 이벤트가 시작된 요소이므로 마크 업의 구조에 따라 e.target의 하위 요소 e.currentTarget이거나 e.target=== e.currentTarget일 수 있습니다 .

나는 시각적 인 답변을 좋아합니다.

를 클릭 #btn하면 두 개의 이벤트 핸들러가 호출되고 그림에 표시된 것을 출력합니다.

여기 데모 : https://jsfiddle.net/ujhe1key/

예를 들어, 단일 리스너를 사용하여 다른 작업을 트리거하는 경우 event.target이 유용 할 수 있습니다. 내부에 10 개의 버튼이있는 일반적인 "메뉴"스프라이트가 있다고 가정 해 봅시다.

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

간단하게 할 수 있습니다 :

menu.addEventListener(MouseEvent.CLICK, doAction);

그리고 event.target (이름 속성 등을 사용하여)에 따라 doAction (event) 내에서 다른 작업을 트리거하십시오.

예를 들어 보자.

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

'btn'을 클릭하면 'true'와 'true'가 나타납니다!

e.currentTarget은 항상 이벤트 리스너가 추가 된 구성 요소를 반환합니다.

반면, e.target은 구성 요소 자체 또는 직계 자녀 또는 손자 또는 손자 손자 등이 될 수 있습니다. 즉, e.target은 표시 목록 계층 구조에서 최상위에 있으며 하위 계층 구조 나 구성 요소 자체에 있어야하는 구성 요소를 반환합니다.

Canvas에 여러 이미지가 있고 구성 요소 내에서 이미지를 끌어다 놓을 때 한 가지 용도가 있습니다. Canvas에 리스너를 추가 할 수 있으며 해당 리스너에 Canvas가 드래그되지 않도록 다음 코드를 작성할 수 있습니다.

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. 타겟은 요소입니다.
• e.currentTarget은 이벤트 리스너가 추가 된 요소입니다.

버튼의 하위 요소를 클릭하면 currentTarget을 사용하여 버튼 속성을 감지하는 것이 좋습니다. CH에서는 때때로 e.target을 사용하는 데 문제가 있습니다.

e.currentTarget은 이벤트가 등록 된 요소 (부모)이고 e.target은 이벤트가 가리키는 노드 (자식)입니다.