JavaScript イベント

1. HTMLイベント

HTMLイベントとは、HTML要素に対して発生する事象（シングス・ザット・ハプン）のことです。
JavaScriptをHTMLページで使用する場合、ブラウザはこれらのイベントに対して何らかの反応（リアクト）を返すことができます。

イベントの例:

• HTMLボタンがクリックされた
• ウェブページのロード（読み込み）が完了した
• マウスが要素の上に移動した
• キーボードのキーが押された
• HTMLのインプットフィールドの内容が変更された

HTML DOMを使用することで、JavaScriptはこれらのイベントを検知し、特定の処理を実行させることが可能になります。

2. JavaScriptイベント

多くの場合、イベントが発生した際に何らかの処理を実行したいと考えます。
JavaScriptを使用すると、イベントが検出されたときにコードを実行することができます。

HTMLでは、JavaScriptコードを含むイベントハンドラー属性をHTML要素に追加することが許可されています。

2.1 構文（シンタックス）

シングルクオーテーションを使用する場合：
<element event='some JavaScript'>

ダブルクオーテーションを使用する場合：
<element event="some JavaScript">

以下の例では、 onclick 属性（処理コードを含む）が <button> 要素に追加されています。

2.2 コード例

<button onclick="document.getElementById('demo').innerHTML = Date()">現在の時刻は？</button>

<p id="demo"></p>

上記の例では、JavaScriptコードが id="demo" を持つ要素のコンテンツを変更しています。

次の例では、 this.innerHTML を使用して、ボタン自身の要素のコンテンツを変更します。

<button onclick="this.innerHTML = Date()">現在の時刻は？</button>

3. JavaScript関数の呼び出し

JavaScriptのコードが数行にわたる場合、イベント属性内で直接記述するよりも、関数（ファンクション）を呼び出すのが一般的です。

コード例

<button onclick="displayDate()">現在の時刻は？</button>

<p id="demo"></p>

<script>
// 日付を表示する関数を定義
function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}
</script>

4. 代表的なHTMLイベント一覧

以下は、頻繁に使用されるHTMLイベントのリストです。

5. JavaScriptイベントハンドラー

イベントハンドラーとは、イベントが発生したときに実行されるJavaScriptコードのことです。
イベントハンドラーは、ユーザーの入力やアクション、ブラウザの挙動を管理・検証するために使用されます。

• ページがロードされるたびに実行すべき処理
• ページが閉じられたときに実行すべき処理
• ユーザーがボタンをクリックしたときに実行されるアクション
• ユーザーがデータを入力した際に検証（バリデーション）すべきコンテンツ
• その他、多種多様なインタラクション

JavaScriptでイベントを扱うには、以下のような様々な手法があります。

1. HTMLイベント属性で直接JavaScriptコードを実行する
2. HTMLイベント属性からJavaScript関数を呼び出す
3. HTML要素に対して独自のイベントハンドラー関数を割り当てる
4. イベントの送信や処理を防止（プロベント）する

6. イベントリスナーの使用

onclick のようなイベント属性を使用する方法は非常に簡単ですが、モダンな開発においては addEventListener() を使用する方法が強く推奨されています。

6.1 非推奨（推奨されない方法）

HTML属性に直接 onclick を記述する方法：

<button onclick="displayDate()">時間は？</button>

<p id="demo"></p>

<script>
// 日付を表示する関数
function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}
</script>

6.2 推奨される方法

addEventListener() メソッドを使用すると、HTMLとJavaScriptのロジックを完全に分離して管理することができます。

<button id="myBtn">クリックしてね</button>

<p id="demo"></p>

<script>
// 要素を取得
const btn = document.getElementById("myBtn");

// ボタンにイベントリスナーを追加
btn.addEventListener("click", function () {
  document.getElementById("demo").innerHTML = Date();
});
</script>