戻る

e.currentTargetとe.target
e.currentTargetとe.target


e.currentTargetイベントハンドラー（イベントリスナー）が設定されている要素
e.targetユーザーが実際に操作した要素

[サンプル]
copy
const parentDiv = document.getElementById('parent');
parentDiv.addEventListener('click', (e) => 
{
	console.log('e.currentTarget:', e.currentTarget.id);
	console.log('e.target:', e.target.id);
	let message = document.getElementById("message");
	let tmp ="";
	if(e.target.id=="b1")
	{
		tmp ="choose up button";
	}
	else if(e.target.id=="b2")
	{
		tmp ="choose down button";
	}
	message.innerText=tmp;
});

e.currentTargetはイベントハンドラー（イベントリスナー）が
設定されている要素のためparentを指します。
イベント委譲によりイベントが処理されます。
このため、どの親要素か？を知ることができます。
この親要素のidを知る方法がe.currentTargetとなります。

[ボタンを選択したケース]
e.targetボタンを選択したidを指します。

[余白を選択したケース]
ボタンを囲んでいるタグが現在選択されているタグのため
e.targetは
上のボタンの余白ならchild1
下のボタンの余白ならchild2
の要素を指します。


戻る



著作権情報
ホームページおよプリ等に掲載されている情報等については、いかなる保障もいたしません。
ホームページおよびアプリ等を通じて入手したいかなる情報も複製、販売、出版または使用させたり、
または公開したりすることはできません。
当方は、ホームペーよびアプリ利用したいかなる理由によっての障害等が発生しても、
その結果ホームページおよびアプリ等を利用された本人または他の第三者が被った損害について
一切の責任を負わないものとします。