JavaScript イベントオブジェクトの扱いについて

JavaScriptではイベントの処理をすることができます。

クリックしたときなどにイベントオブジェクトが発生し、そのオブジェクトには多くの情報が含まれています。

しかし、このイベントオブジェクトを関数から関数にたらい回しにするのはよくありません。

例えば、クリックイベントが発生したときに実行するhandleClickという関数があるとします。

この関数から別の関数を呼び出している場合に、イベントをオブジェクトをそのまま別の関数に渡すのはよくありません。

イベントオブジェクトはhandleClick内のみで参照し、handleClick関数から呼ばれる関数には必要な情報だけを渡します。

const tamiFunc = (x, y) => {
	console.log(x)
  console.log(y)
}


const el = document.getElementById('button')

el.addEventListener('click', e => {
	handleClick(e)
})

const handleClick = e => {
	console.log('クリックされました')
  tamiFunc(e.clientX, e.clientY) // tamiFuncには必要な情報だけ渡す。eをそのまま渡さない
}

このようにすることで、tamiFuncは画面から切り離されて単純なロジックになるので、テストをしたり、他から呼び出しやすくなります。

JavaScript

Posted by たみぼうず