Javascript。要素がイベントを送信したイベントハンドラの内部をチェックする方法はありますか？

Question

私はエンティティコンポーネントベースの大きなフレームワークを使用しています。だから私は、イベントを送信する要素のコードを変更することはできません、私は受信要素でのみ動作することができます。

コンポーネント（イベントハンドラなど）がイベントを送信している要素の親要素に添付されているため、this.idは機能しません。

私はjavascriptで作業していますが、jqueryはありません。

受信側の要素のイベントハンドラの内部を調べる方法があるかどうか疑問に思っていました。元々イベントを送信した要素はありますか？

は私が

function doWithThisElement(event) { 
event = event || window.event; // IE 
var target = event.target || event.srcElement; // IE 

var id = target.id; 
//... 

}

のような他のソリューションを閲覧しようとしたが、それは私のために動作しません。

Answer 1

event.targetプロパティを使用して、イベントをトリガーした要素を知ることができます。イベントをディスパッチしたオブジェクトへの参照が含まれています。

また、このイベント（event.target）は、イベントのキャプチャとバブルフェーズでイベントが登録された要素と異なる場合があります。あなたが戻ってするためにトリガーされ、イベントを開始したDOM要素をevent.targetプロパティを使用する必要が

document.addEventListener('click', function(e){ 
 
    var eventTarget = e.target; 
 
    console.log(eventTarget); 
 
    });

Answer 2

。 jQueryのevent.targetで

$('div').click(function(event){ 
 
    console.log(event.target.id); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="div1">div1</div> 
 
<div id="div2">div2</div> 
 
<div id="div3">div3</div>

Answer 3

常に「イベント」が関数に渡されるパラメータであるイベントをトリガ要素を指します。 「これは」も、動作することが、それはjQueryオブジェクトではありませんので、あなたがそれにjQueryの機能を使用したいならば、あなたは「$（この）としてそれを参照する必要があることをhttp://api.jquery.com/category/events/event-object/

$(document).ready(function() { 
    $("a").click(function(event) { 
     alert(event.target.id); 
    }); 
}); 

も注意」、例えば：

$(document).ready(function() { 
    $("a").click(function(event) { 
     // this.append wouldn't work 
     $(this).append(" Clicked"); 
    }); 
}); 

クレジット：Getting the ID of the element that fired an event