メインコンテンツまでスキップ

イベントハンドラ

DOM 要素に対し、何らかのアクション（イベント）が起こった際の反応（イベントハンドラ）を定義することができます。

<button id="amazing-button">押してね</button>
document.getElementById("amazing-button").onclick = () => {
  alert("びっくり！");
};

DOM オブジェクトのonclickプロパティには、その要素がクリックされた時に呼ばれる関数を指定します。今回は、アロー関数式を用いて、() => { alert('びっくり！'); }という関数を指定しています。

ヒント

alertは、画面上にモーダルダイアログボックスを表示させる関数です。

警告

この記事以降、document.writeは一切使用しません。これは、document.writeをページの読み込みが完了した状態で実行すると、ページの内容を全て消去してしまうためです。何かを出力する必要がある場合は、代わりにconsole.logを使用しましょう。

イベントオブジェクト​

イベントハンドラには、イベントオブジェクトと呼ばれる、起きたイベントの詳細を表すオブジェクトが引数として渡される場合が多いです。イベントオブジェクトを受け取る引数名には、eを使う場合が多いです。

<input />
document.querySelector("input").onkeydown = (e) => {
  console.log(e.key);
};

keydownイベントのイベントオブジェクトには、押されたキーが格納されている、keyプロパティがあります。

課題​

0を表示するdiv要素とボタンをひとつ用意し、ボタンがクリックされるたびにdiv要素内部に表示されている値を 1 ずつ増やすプログラムを作成してください。