web-dev-qa-db-ja.com

e.targetとe.currentTargetの違い

違いはわかりませんが、どちらも同じように見えますが、そうではないと思います。

どちらか一方を使用する場合の例は歓迎されます。

actionscript-3eventsevent-handling
240
Artemix

ベンは答えが完全に正しいので、彼の言うことを覚えておいてください。これから説明するのは完全な説明ではありませんが、マウスイベントと表示リストに関連して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個のボタンの1つであり、e.currentTargetは常に「btns」クリップです。

MouseEventをROLL_OVERに変更した場合、またはプロパティbtns.mouseChildrenをfalseに設定した場合、e.targetとe.currentTargetは両方とも常に「btns」になることに注意してください。

191
Zevan

e.targetはイベントディスパッチャをトリガーするトリガーであり、e.currentTargetはリスナーに割り当てたものです。

384
Ben Gale

e.currentTargetは常に、イベントが実際にバインドされる要素です。 e.targetはイベントの発生元の要素です。したがって、e.targetはe.currentTargetの子、またはe.targetはマークアップの構造に応じて=== e.currentTargetになります。

23
Alex K

視覚的な答えが好きです。

enter image description here

#btnをクリックすると、2つのイベントハンドラーが呼び出され、写真に表示されているものが出力されます。

ここのデモ： https://jsfiddle.net/ujhe1key/

14
Maria Ines Parnisari

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）内で異なるアクションをトリガーします（nameプロパティなどを使用）。

8
Cay

例を作ってください：

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」が表示されます！

4
Yuan Zhaohao

e.currentTargetは常に、イベントリスナーが追加されるコンポーネントを返します。

一方、e.targetは、コンポーネント自体、またはイベントを受け取った直接の子、孫、または孫などです。つまり、e.targetは、表示リスト階層の最上位にあり、子階層またはコンポーネント自体に存在する必要があるコンポーネントを返します。

1つの用途は、Canvasに複数のImageがあり、Canvas以外のコンポーネント内にImageをドラッグする場合です。 Canvasにリスナーを追加し、そのリスナーで次のコードを記述して、Canvasがドラッグされないようにすることができます。

function dragImageOnly(e:MouseEvent):void
{
    if(e.target==e.currentTarget)
    {
        return;
     }
     else
     {
        Image(e.target).startDrag();
     }
}
3
Asad
  • e.targetは要素です。f.e。クリック
  • e.currentTargetは、イベントリスナーが追加された要素です。

ボタンの子要素をクリックした場合、currentTargetを使用してボタンの属性を検出することをお勧めします。CHではe.targetを使用することが問題になる場合があります。

2
Marcel GJS
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.
1
Muthukrishnan Kandasamy

e.currentTargetは、イベントが登録されているelement（parent）、e.targetは、イベントが指しているnode（children）です。

0
Samyak Jain