HTML - イベントリファレンス：ウェブページをインタラクティブにするための入門ガイド
こんにちは、将来のウェブ開発者さんたち！HTMLイベントの世界に足を踏み入れるこのエキサイティングな旅に、あなた们的ガイドとして嬉しく迎えます。コンピュータサイエンスを10年以上教えてきた者として、イベントの理解はウェブのインタラクティビティの秘密の言語を学ぶことだと言えます。では、一緒にこの魔法の領域を解錠してみましょう！
HTMLイベントとは？
具体的な内容に進む前に、HTMLイベントとは何かを理解しましょう。パーティ（ウェブページ）にいるとします。あなたが何かを行うたびに、肩を叩く（ボタンをクリックする）や秘密を囁く（テキストを入力する）那样的な行動がイベントです。ウェブの世界では、イベントはブラウザ内で起こるアクションや出来事で、あなたのHTMLが検出し、応答するものです。すごいでしょう？
では、さまざまなイベントの種類とその使い方を探ってみましょう。
ウィンドウイベント属性
ウィンドウイベントは、あなたのウェブページの家のドアベルのようです。誰かが来たり去ったりするのを知らせてくれます。
以下は一般的なウィンドウイベントの表です：
| イベント | 説明 |
|---|---|
| onload | ページが読み込み完了したときに発火 |
| onunload | ユーザーがページから移動したときに発火 |
| onresize | ブラウザウィンドウがリサイズされたときに発火 |
| onscroll | ユーザーがページをスクロールしたときに発火 |
以下に例を示します：
<body onload="alert('ようこそ私のページへ！')">
<h1>私の素晴らしいウェブサイト</h1>
</body>この例では、ページが読み込まれると、欢迎のアラートが表示されます。ゲストが入ってくる瞬間に挨拶するようなものです！
フォームイベント
フォームは実際のインタラクションが起こる場所です。ユーザーとの会話のようなものです。
以下はフォームイベントの表です：
| イベント | 説明 |
|---|---|
| onsubmit | フォームが送信されたときに発火 |
| onreset | フォームがリセットされたときに発火 |
| onchange | インプットの値が変わったときに発火 |
| onfocus | 要素がフォーカスを受け取ったときに発火 |
| onblur | 要素がフォーカスを失ったときに発火 |
以下に例を示します：
<form onsubmit="alert('フォームが送信されました！'); return false;">
<input type="text" onchange="this.style.backgroundColor='yellow'">
<input type="submit" value="送信">
</form>このフォームでは、テキストインプットを変更すると背景色が黄色に変わる（サプライズ！），そして送信するとアラートが表示されます。フォームがあなたに返事をするようなものです！
キーボードイベント
キーボードイベントは、あなたがキーボード上进行う finger dance に関するものです。
以下はキーボードイベントの表です：
| イベント | 説明 |
|---|---|
| onkeydown | キーが押されたときに発火 |
| onkeyup | キーが解放されたときに発火 |
| onkeypress | キーが押され解放されたときに発火 |
以下に例を示します：
<input type="text" onkeypress="document.body.style.backgroundColor='lightblue'">このインプットでキーを押すたびに、ページの背景色がライトブルーに変わります。ピアノを弾いて色を塗るようなものです！
マウスイベント
マウスイベントは、クリックや移動に関するものです。
以下はマウスイベントの表です：
| イベント | 説明 |
|---|---|
| onclick | 要素がクリックされたときに発火 |
| ondblclick | 要素がダブルクリックされたときに発火 |
| onmouseover | マウスが要素の上に移動したときに発火 |
| onmouseout | マウスが要素から離れたときに発火 |
以下に例を示します：
<button onclick="this.innerHTML='クリックされました！'"
onmouseover="this.style.color='red'"
onmouseout="this.style.color='black'">
クリックしてね！
</button>このボタンは、マウスが乗ると色が変わり、クリックするとテキストが変わります。カメレオンのボタンのようなものです！
ドラッグイベント
ドラッグイベントは、要素を移動可能にします。チェスボードの駒のようなものです。
以下はドラッグイベントの表です：
| イベント | 説明 |
|---|---|
| ondrag | 要素がドラッグされたときに発火 |
| ondragstart | ユーザーが要素をドラッグし始めたときに発火 |
| ondragend | ユーザーが要素のドラッグを終えたときに発火 |
以下に簡単な例を示します：
<div draggable="true" ondragstart="alert('ドラッグが開始されました！')">
私をドラッグしてね！
</div>このdivをドラッグし始めるとアラートが表示されます。要素が「ワヒー！空を飛んでいる！」と言っているようなものです！
クリップボードイベント
クリップボードイベントは、コピー、カット、ペーストに関するものです。
以下はクリップボードイベントの表です：
| イベント | 説明 |
|---|---|
| oncopy | ユーザーが内容をコピーしたときに発火 |
| oncut | ユーザーが内容をカットしたときに発火 |
| onpaste | ユーザーが内容をペーストしたときに発火 |
以下に例を示します：
<textarea oncopy="alert('コピーされました！')" oncut="alert('カットされました！')" onpaste="alert('ペーストされました！')">
ここでコピー、カット、ペーストを試してください！
</textarea>このテキストエリアは、クリップボード操作を行うたびに通知します。話し好きなメモ帳のようなものです！
メディアイベント
メディアイベントは、ページ上で音声や動画を再生する際のものです。
以下はメディアイベントの表です：
| イベント | 説明 |
|---|---|
| onplay | メディアが再生開始したときに発火 |
| onpause | メディアが一時停止されたときに発火 |
| onended | メディアが終了したときに発火 |
以下に簡単な例を示します：
<audio src="song.mp3" controls onplay="alert('音楽を楽しみましょう！')" onended="alert('お楽しみいただけたでしょうか！')"></audio>このオーディオ要素は、再生開始時に greeting をし、終了時にフィードバックを求めます。あなたの意見を気遣うDJのようなものです！
その他のイベント
カテゴリに詰まらない多くのイベントがあります。以下にいくつか举げます：
| イベント | 説明 |
|---|---|
| onerror | エラーが発生したときに発火 |
| oncontextmenu | ユーザーが右クリックしたときに発火 |
| onwheel | マウスホイールが回転したときに発火 |
以下に一つの例を示します：
<img src="image.jpg" onerror="this.src='default.jpg'">画像が読み込めない場合、自動的にデフォルトの画像に切り替わります。バックダンサーが準備されているようなものです！
そして、ここまでが、皆さんのHTMLイベントの世界への最初の一歩です。イベントをマスターする鍵は練習です。さまざまなイベントを組み合わせ、新しいアイデアを試し、最も重要なのは、楽しむことです！
いつも私の生徒たちに言うように、コードを書くことは料理するようなものです。最初は散らかすかもしれませんが、練習を積むことで、すぐに名作を創作できるようになります。では、これらのイベントを試してみて、あなたのウェブページが生きるのを見てください！
Credits: Image by storyset