JavaScriptのイベントとイベントハンドラの基本｜onclick・onload・onmouseoverを初心者向けに解説

JavaScriptでは、ユーザーの操作やページの状態変化に応じて「イベント」が発生します。
クリック、ページ読み込み完了、フォームの変更など、何かしらの動作が起こったタイミングで処理を実行できる仕組みが イベントハンドラ です。

たとえば、ボタンがクリックされたときのイベントハンドラは onclick、ページ読み込み完了時は onload になります。

イベントでスクリプトを実行する方法

イベントハンドラを HTML の属性（イベント属性）や JavaScript のコード内で設定すると、
指定したイベントが発生したタイミングで処理を実行できます。

また、複数の処理を実行したい場合は ;（セミコロン）で区切ることで連続して実行できます。

HTML要素の属性としてイベントハンドラを記述し、実行したい JavaScript を " " で囲んで指定する方法です。

// ページ読み込み完了時に alert(‘ようこそ’) を実行
<body onload=”alert(‘ようこそ’)”>

// ボタンをクリックすると2つの処理が順に実行される
<input type=”button” value=”Click!” onclick=”alert(‘最初の処理’); alert(‘次の処理’);”>

このように、イベント属性を使うと HTML 内で簡単にイベント処理を記述できます。

HTMLにイベント属性を書かず、JavaScriptコード内でイベントハンドラを設定する方法です。

この場合、関数を代入するため () は不要 です。

function myFunc() {
alert(“シェイクスピア『ハムレット』から”);
return false;
}

document.getElementById(“test”).onmouseover = myFunc;

この例では、id=”test” の要素にマウスカーソルが乗ったときに myFunc が実行されます。