戻る

addEventListenerと引数の関数とevent
関数の引数にeventについて

イベントリスナーの第2引数に関数を設定した場合
イベント実行時に実行される関数の第1引数にeventが渡されます。
このeventはイベントリスナーの第1引数に設定した値に一致するeventです。

[サンプル]
copy
function endDrag(e)
{
	if (!isDragging) return;
	updateColorAtEvent(e);
	isDragging = false;
	//PointerCapture release
	try { canvas.releasePointerCapture(e.pointerId); } catch {}
}
//touch or mouse operation leave
canvas.addEventListener('pointerup', endDrag);

canvas.addEventListener('pointerup', endDrag);
上記イベントの引数として使用している「endDrag」の関数について
「関数の呼び出し結果」ではなく「関数そのもの(参照)」です。
イベントが呼ばれる際に実行されるものであり、現時点は呼び出していません。
イベントを検知したときに
登録済みのリスナーを「呼び出す側」として実行します。
その際にEventオブジェクト(この例では第1引数が「pointerup」なのでPointerEvent)を
endDrag関数の第1引数として渡します。
イベントリスナーの場合は、呼び出すのがブラウザ側なので「必ず第1引数に Event を渡す」という仕様になっています。

そのため「endDrag()」とイベントリスナーの引数に渡してしまうと
今、実行してしまい、戻り値をリスナーに登録してしまい、プログラムの意図が変わってしまいます。

[イベントリスナーで関数の引数を省略しても動作している理由]
引数が不足している場合はundefinedを返します。

関数部分は下記の様に置き換えて考えることができます。
canvas.addEventListener('pointerup', (event) => endDrag(event));
サンプルのコードと同じ意味です。
(Eventをブラウザが渡し、それをそのまま endDrag に渡しています。)




戻る


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