JavaScriptにおけるEventオブジェクトの基礎

このレッスンでは、Eventオブジェクトの基本操作を学びます。 このオブジェクトには、発生したイベントに関する情報が含まれています。 例えば、要素がクリックされた場合、そのクリックの座標、 クリック時にCtrl、Alt、 またはShiftキーが押されていたかどうかなどを知ることができます。

Eventオブジェクトを取得する方法を見てみましょう。 ボタンがあるとします：

html<button id="elem">text</button>

このボタンをクリックすると、ある関数が実行されるとします：

javascriptlet elem = document.querySelector('#elem');

elem.addEventListener('click', function() {

});

バインドされた関数内には既にEventオブジェクトが存在しますが、 まだそれを取得する方法を知りません。 次のようにして取得できます： 関数を宣言する際に、任意の変数（通常はeventですが、 名前は任意です）をパラメータとして渡すと、 ブラウザは自動的にこの変数にEventオブジェクトを格納します：

javascriptelem.addEventListener('click', function(event) {
  console.log(event); // イベントオブジェクトを表示
});