通常、イベントの名前は、クリック イベント onclick、ページ読み込みイベント onload など、単語on
で始まります。次の表に、JavaScript で一般的に使用されるイベントをいくつか示します。
イベント | 説明 | |
---|---|---|
マウスとキーボードのイベント | onclick | このイベントはマウスをクリックすると発生します |
ondblclick | このイベントは、マウスがダブルクリックされたときに発生します | |
onmousedown | このイベントはマウスが押されたときに発生します | |
onmouseup | このイベントは、マウスを押して放したときにトリガーされます。 | |
onmouseover | このイベントは、マウスが要素上に移動すると発生します。 | |
onmousemove | このイベントはマウスが移動されたときに発生します | |
onmouseout | このイベントは、マウスが要素の境界を離れると発生します。 | |
onkeypress | このイベントは、キーボードのキーが押されて放されたときに発生します。 | |
onkeydown | このイベントは、キーボードのキーが押されたときにトリガーされます | |
onkeyup | このイベントは、キーボードのキーが放されたときにトリガーされます | |
ウィンドウイベント | onabort | このイベントは、ダウンロード中にユーザーが画像を中断したときにトリガーされます。 |
onbeforeunload | このイベントは、現在のページのコンテンツが変更されようとしているときにトリガーされます | |
onerror | このイベントはエラーが発生したときに発生します | |
onload | このイベントは、ページコンテンツの読み込みが完了したときに発生します。 | |
onmove | このイベントは、ブラウザのウィンドウが移動されたときに発生します。 | |
onresize | このイベントは、ブラウザのウィンドウ サイズが変更されたときにトリガーされます | |
onscroll | このイベントは、ブラウザのスクロール バーがスクロールされると発生します。 | |
onstop | このイベントは、ブラウザの停止ボタンが押されたとき、またはダウンロード中のファイルが中断されたときにトリガーされます。 | |
oncontextmenu | このイベントは、右クリックのコンテキスト メニューがポップアップしたときにトリガーされます。 | |
onunload | このイベントは、現在のページが変更されたときにトリガーされます | |
フォームイベント | onblur | このイベントは、現在の要素がフォーカスを失ったときに発生します。 |
onchange | このイベントは、現在の要素がフォーカスを失い、要素のコンテンツが変更されたときに発生します。 | |
onfucus | このイベントは、要素がフォーカスを取得したときに発生します。 | |
onreset | このイベントは、フォームのリセット ボタンがクリックされたときに発生します。 | |
onsubmit | このイベントはフォームが送信されたときに発生します |
イベントバインディング
イベントは、HTML 要素にバインドされた後にのみトリガーできます。イベント ハンドラを HTML 要素にバインドするには、さまざまな方法があります。最も簡単なのは、onclick、onmouseover、onmouseout およびその他の属性などのHTML イベント属性を介してイベント ハンドラを直接バインドすることです。
onclick 属性を例として、指定された HTML 要素のマウス クリック イベント (つまり、要素上でマウスの左ボタンがクリックされたときにトリガーされるイベント) を定義できます。サンプル コードは次のとおりです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<button type="button" onclick="myBtn()">ボタン</button>
<script type="text/javascript">
function myBtn(){
alert("こんにちは、世界!");
}
</script>
</body>
</html>
上記の方法に加えて、次の例に示すように、JavaScript で提供される組み込み関数を直接使用して、指定された要素のイベント ハンドラーをバインドすることもできます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<button type="button" id="myBtn">ボタン</button>
<script>
function sayHello() {
alert('こんにちは、世界!');
}
document.getElementById("myBtn").onclick = sayHello;
</script>
</body>
</html>
JS イベントの例
一般に、イベントはマウス イベント、キーボード イベント、フォーム イベント、ウィンドウ イベントの 4 つのカテゴリに分類でき、その他にもいくつかのイベントがあります。ここでは、より一般的に使用されるイベントのいくつかを簡単に紹介する例をいくつか示します。
1) onmouseover イベント
onmouseover イベントは、ユーザーのマウス ポインターが要素上に移動したときにトリガーされるイベントを指します。サンプル コードは次のとおりです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<button type="button" onmouseover="alert('あなたのマウスがこのボタンに移動しました。');">ここにマウスを移動してください</button><br>
<a href="#" onmouseover="myEvent()">ここにマウスを移動してください</a>
<script>
function myEvent() {
alert('あなたのマウスがこのリンクに移動しました。');
}
</script>
</body>
</html>
2) onmouseout/オンマウスアウトイベント
onmouseout イベントは、onmouseover イベントの逆です。onmouseout イベントは、マウスが要素から離れるとトリガーされます。サンプル コードは次のとおりです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<div style="width: 350px; height: 200px; border:1px solid black" id="myBox"></div>
<script>
function myEvent() {
alert('マウスカーソルが指定された要素から離れました。');
}
document.getElementById("myBox").onmouseout = myEvent;
</script>
</body>
</html>
3) onkeydown/オンキーダウンイベント
onkeydown イベントは、ユーザーがキーボードのキーを押したときにトリガーされるイベントを指します。サンプル コードは次のとおりです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<input type="text" onkeydown="myEvent()">
<script>
function myEvent() {
alert("キーボードのボタンを押しました。");
}
</script>
</body>
</html>
4) onkeyup/オンキーアップイベント
onkeyup イベントは、ユーザーがキーボードのキーを押して放したとき (つまり、キーを押して放したとき) にトリガーされるイベントを指します。サンプル コードは次のとおりです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<input type="text" onkeyup="myEvent()">
<script>
function myEvent() {
alert("キーボードのボタンを押して解放しました");
}
</script>
</body>
</html>