event.currentTargetとevent.targetの違い

Tweet

See the Pen used target by nakanishi (@nakanishi) on CodePen.

event.target と event.currentTargetは違う

イベントが発生した時に、イベントリスナーでイベントオブジェクトを取得することができるが、このイベントリスナーの event.target と event.currentTarget は「異なる性質」を持つので注意したい。

確認：イベントリスナーとは

イベントリスナーとは、イベントターゲット(HTMLの各種要素=ノード等)に対して、イベント(clickやhover)が発生した際に実行する「関数、もしくはオブジェクト」を関連付ける仕組みのこと。具体的には、あるdivがマウスオーバーされた時に特定の関数を実行する、といった機能を実装する際に使われる。

//ES6です
'use strict';

class AddHover {
  constructor(target) {
    this.target = target;
    this.hover(this.target);
    console.log("new"+this.target);
  }
  
  hover(target) {
    let $hoverTarget = $(target);
    let rolloverClass = 'hover';
    $hoverTarget.hover(
    //ここがイベントリスナー
      (event) => {
        $(event.currentTarget).addClass(rolloverClass);    
      },
      (event) => {
        $(event.currentTarget).removeClass(rolloverClass); 
      }
    )
  }
}

イベントオブジェクトとは

イベントリスナーで指定する関数の第一引数に、イベント・オブジェクトが入る。(event) => {} はfunction(event){}と同じ意味。

//ES6です
$hoverTarget.hover(
　(event) => {
    $(event.currentTarget).addClass(rolloverClass);    
    },
  (event) => {
    $(event.currentTarget).removeClass(rolloverClass); 
  }
)

event.currentTargetとevent.targetの違い

See the Pen used target by nakanishi (@nakanishi) on CodePen.

やっと本題だが、event.currentTargetは、イベントが付けられたノードを返し、event.targetは実際にイベントが発生したノードを返す。

上記のコードデモでは、nakaと書かれたdivはcurrentTargetを指定しているため、正常に動くが、その下のdivではラテン語のダミーテキストにマウスオーバーをするとテキスト部分だけに色が付いてしまい意図した挙動とならない。こちらはtargetを指定しているためだ。

targetはイベントリスナーを付けたノードではなく、マウスオーバー「イベントが発生したノードそのもの」を返すために、今回の例ではダミーテキストが入った<p>ノードを返す。結果としてバックグラウンドカラーが、pの部分だけに指定されてしまう。

実装時には、HTMLの構造、及びクラス付に注意しながらtargetとcurrentTargetを使い分ける必要がある。