JavaScriptのイベントのハンドル関数のthisとeven.target

JavaScriptのイベントモデルでは、イベントトリガが開始されるため、捕獲段階と発泡段階がある(詳細は、JavaScriptのaddEventListenerの第三パラメータについての注記).したがって、トリガ要素は、精確トリガ要素と不精確トリガ要素に分類される.例えば、以下の構成では、

3つの相互入れ子の要素がいずれも一つのonclickを持っていると仮定して、イベントのハンドルをクリックします.ボタンをクリックした時に、この三つの要素が取り込まれます.一番内側のボタン要素、つまり私が正確にクリックした元素です.私は「精確トリガ要素」と言います.したがって、残りの二つは「不正確トリガ要素」である.では、イベントのハンドルをトリガするコールバック関数において、最初のパラメータは常にevent例であり、targetの属性があり、「正確なトリガ要素」を指し、「不適切なトリガ要素」のコールバック関数において、thisは要素本体を指し、event.targetはその「正確なトリガ要素」を指している.両者は区別できる.「精確トリガ要素」のイベント関数の内部には、this===event.targetがあるはずです.オリジナルJavaScriptコードまたはjQueryで検証できます.

//  JavaScript
document.getElementById("inner").onclick=function(event){
    console.log(this===event.target)
}

//jQuery+    
$("#inner").click(function(event){
    console.log(event.target===this)
})

ただし、矢印関数を使って検証する場合は特に注意が必要です.例えば、矢印関数のthisが要素ではなく、グローバル変数windowを指すので、以下のコードで検証されるのはエラーである.

//  
$("#inner").click((event)=>{
    console.log(event.target===this)
})

私たちはそれを手動で結びつける必要があります.

//  
$("#inner").click((function(){
    return (event)=>{
        console.log(event.target===this)
    }
}).call($("#inner")[0]))