第12章　イベント

# **イベント(event)**
***

イベントとはPC上で「マウスをクリックした」、「ページが読み込まれた」など、何かが起きた時に発生するものです。
イベントハンドラは、HTMLタグの属性です。属性値の部分にイベント発生時に実行する処理（javaScript）を記述します。

```
<タグ名 イベントハンドラ = "JavaScriptによる処理"></タグ>

```

## **1.おもなイベント**
<table border="1">
<tr style="background-color:#C6E0B4 ;text-align:center;"><th>イベントハンドラ</th><th>説明</th></tr>
<tr><td>onClick</td><td>マウスがクリックされた時</td></tr>
<tr><td>onDbclick</td><td>マウスがダブルクリックされた時</td></tr>
<tr><td>onKeydown</td><td>キーが押された時</td></tr>
<tr><td>onKeypress</td><td>キーがしばらく押された時</td></tr>
<tr><td>onKeyup</td><td>キーが離された時</td></tr>
<tr><td>onMouseup</td><td>マウスボタンが離された時</td></tr>
<tr><td>onMouseover</td><td>マウスカーソルがオブジェクトに重なった時</td></tr>
<tr><td>onMouseout</td><td>マウスカーソルがオブジェクトから離れた時</td></tr>
<tr><td>onMousemove</td><td>マウスカーソルが移動した時</td></tr>
<tr><td>onLoad</td><td>ページが読み込まれた時</td></tr>
<tr><td>onFocus</td><td>選択された状態になった時</td></tr>
<tr><td>onBlur</td><td>フォーカスを失った時</td></tr>
<tr><td>onSubmit</td><td>フォームがサブミットされた時</td></tr>
<tr><td>onReset</td><td>フォームがリセットされた時</td></tr>
<tr><td>onChange</td><td>フォームの内容が変更された時</td></tr>
<tr><td>onResize</td><td>ウインドウがリサイズされた時</td></tr>
<tr><td>onMove</td><td>ウインドウが移動された時</td></tr>
<tr><td>onDragdrop</td><td>ファイルがウインドウにドラッグ＆ドロップされた時</td></tr>
<tr><td>onAbort</td><td>イメージの読み込みが中断された時</td></tr>
<tr><td>onError</td><td>読み込みが失敗した時</td></tr>
<tr><td>onSelect</td><td>テキストが選択された時</td></tr>
</table>

## **2.イベント処理の流れ**
>(１)ページ上のオブジェクト（画像、文字等）をクリックした。(onClick)→イベント発生<br>
>(２)クリックしたことがオブジェクトに伝えられる。<br>
>(３)そのイベントに対しての処理が記述されていたら、その処理を実行する。

## **3.イベントの使い方**
### **onClickイベント**
ボタンをクリックしたときに発生するclickイベントがあります。

#### **例**
[sample12-1.html]
```
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>サンプル</title>
</head>
<body>
    <button onClick="alert('Hello World');" >クリック</button>    
</body>
</html>
```
#### **実行結果**

<a href="https://i.loli.net/2019/08/26/roqHjW2AnVXd7sO.png" target="_blank">
<img src="https://i.loli.net/2019/08/26/roqHjW2AnVXd7sO.png" width="40%"> </a>

注意：
+ ダブルクォートで囲まれた中("～")には ダブルクォートを記述しない
+ シングルォートで囲まれた中('～')には シングルクォートを記述しない

<br>

### **onLoadイベント**
Webページが表示されたタイミングで実行されます。一般的に```<body>```要素の属性として指定します。

#### **例**
[sample12-2.html]

```
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>サンプル</title>
</head>
<body onLoad="alert('Hello World');">
   
</body>
</html>
```

#### **実行結果**

<a href="https://i.loli.net/2019/08/26/tgjEKS79hR4XaHJ.png" target="_blank">
<img src="https://i.loli.net/2019/08/26/tgjEKS79hR4XaHJ.png" width="40%"> </a>

<br>

### **mouseOver/mouseOutイベント**

ページ上の部品にマウスカーソルが乗ったときと、マウスカーソルが外れたときに実行されます。
画像にマウスカーソルが乗ったら別の画像を表示するなどの用途で利用されます。

#### **例**
[sample12-3.html]

```
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>サンプル</title>
</head>
<body>
    <img src="http://itjob.co.jp/assets/img/demo/itjob.png" onMouseover="alert('カーソルが乗っています');" onMouseout="alert('カーソルが外れました');">
</body>
</html>
```
#### **実行結果**

<a href="https://i.loli.net/2019/08/26/oMuvALCSlbVX6hZ.png" target="_blank">
<img src="https://i.loli.net/2019/08/26/oMuvALCSlbVX6hZ.png" width="40%"> </a>

<br>

### **onFocus/onBlurイベント**
ページ上の部品にフォーカスが当たったときと、フォーカスが外れた時に実行されます。
フォーカスとは、部品が選択された状態のことを指します。

#### **例**
[sample12-4.html]

```
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>サンプル</title>
</head>
<body>
    <input type="text" onFocus="console.log('フォーカスを取得しました');" onBlur="console.log('フォーカスが外れたれました');">
</body>
</html>
```
#### **実行結果**

<a href="https://i.loli.net/2019/08/26/2QxyAPkmMOFiVE9.png" target="_blank">
<img src="https://i.loli.net/2019/08/26/2QxyAPkmMOFiVE9.png" width="40%"> </a>

### **onChangeイベント**
セレクトボックスなどの選択項目が変更された場合に実行されます。

#### **例**
[sample12-5.html]

```
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>サンプル</title>
</head>
<body>
    <select onChange="console.log('項目が変更されました');">
        <option>バナナ</option>
        <option>みかん</option>
        <option>メロン</option>
        <option>りんご</option>
    </select>
</body>
</html>
```
#### **実行結果**

<a href="https://i.loli.net/2019/08/26/4vul1soh5n9mgQB.png" target="_blank">
<img src="https://i.loli.net/2019/08/26/4vul1soh5n9mgQB.png" width="40%"> </a>

## **4.イベント発生元の特定**
一つの関数を複数のイベントから呼び出すとき、呼び出された関数内でどの部品から発生したイベントなのかを知りたい場合があります。
そのようなときには、thisキーワードを利用します。イベントハンドラに関連付けた処理の中で```this```キーワードを記述した場合、```this```は
イベントハンドラ属性がつけられたHTML要素を表します。

#### **例**
[sample12-6.html]

```
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>サンプル</title>
    <script>
        function check(btn) {
            alert(btn.value + "がクリックされました");
        }
    </script>
</head>
<body>
    <input type="button" value="ボタンA" onClick="check(this);">
    <input type="button" value="ボタンB" onClick="check(this);">
    <input type="button" value="ボタンC" onClick="check(this);">
</body>
</html>
```

<a href="https://i.loli.net/2019/08/26/PeQrV47sDh86Fof.png" target="_blank">
<img src="https://i.loli.net/2019/08/26/PeQrV47sDh86Fof.png" width="40%"> </a>

#### **例**
[sample12-7.html]

```
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>サンプル</title>
</head>
<body onLoad="alert('こんにちは！')">
    <div onClick="alert('文字がクリックされました')">
        この文字をクリックしてみてください
    </div>
    <br>
    <a href="http://itjob.co.jp/" onClick="alert('ITJOBがクリックされました')">
        このリンクをクリックしてみてください
    </a>
    <br><br>
    <img src="http://itjob.co.jp/assets/img/demo/itjob.png" onClick="alert('ITJOBのロゴがクリックされました')">
</body>
</html>
```
#### **実行結果**

<a href="https://i.loli.net/2019/08/21/1SzHIXNtFYL68mk.png" target="_blank">
<img src="https://i.loli.net/2019/08/21/1SzHIXNtFYL68mk.png" width="40%"> </a>

***

>**練習**
>>**問題**[ex12-1.html]

下記のようなラジオボタンを作成し、クリックされたボタンを下記の情報をalertください。
+ 男性がクリックされました
+ 女性がクリックされました
<br>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>サンプル</title>
    <script>
        function check(btn) {
            alert(btn.value + "がクリックされました");
        }
    </script>
</head>
<body>
    性別：
    <input type="radio" name="sex" value="男性" onClick="check(this);">男性
    <input type="radio" name="sex" value="女性" onClick="check(this);">女性
</body>
</html>

content

第12章 イベント

第12章　イベント