第4章　jQuery イベントメソッド

# **jQuery イベントメソッド**
***

jQueryはHTMLページのイベントに応答するように調整されています。

<br>

## **1.イベントとは**
Webページが応答できるさまざまな訪問者の行動はすべてイベントと呼ばれます。

イベントは、何かが起こる正確な瞬間を表します。

#### 例：
* 要素の上にマウスを移動する
* ラジオボタンを選択する
* 要素をクリックする

例：「keypressイベントが発生しました。キーを押した瞬間に」

一般的な**DOM**イベントは次のとおりです。
<table border="1">
<tr>
	<th align="center">Mouse Events</th>
	<th align="center">Keyboard Events</th>
	<th align="center">Form Events</th>
	<th align="center">Document/Window Events</th>
</tr>
<tr>
	<td>click</td>
	<td>keypress</td>
	<td>submit</td>
	<td>load</td>
</tr>
<tr>
	<td>dblclick</td>
	<td>keydown</td>
	<td>change</td>
	<td>resize</td>
</tr>
<tr>
	<td>mouseenter</td>
	<td>keyup</td>
	<td>focus</td>
	<td>scroll</td>
</tr>
<tr>
	<td>mouseleave</td>
	<td></td>
	<td>blur</td>
	<td>unload</td>
</tr>
</table>

## **2.イベントメソッドのjQuery構文**
```
$(セレクタ).イベント名(イベントが発生したときに実行したい処理)
```

jQueryでは、ほとんどのDOMイベントに同等のjQueryメソッドがあります。

ページ上のすべての段落にクリックイベントを割り当てるには、次の操作を行います。

```
$("p").click();
```

次のステップは、イベントが発生したときに何が起こるべきかを定義することです。あなたはイベントに関数を渡す必要があります：

```
$("p").click(function(){
  // action goes here!!
});
```
<br><br>

## **3.一般的に使用されるjQueryイベントメソッド**

### **$(document).ready()**
この`$(document).ready()`メソッドは、ドキュメントが完全にロードされたときに関数を実行することを可能にします。このイベントは、jQueryの構文の章で既に説明されてい ます。

### **click()**
この`click()`メソッドは、イベントハンドラ関数をHTML要素に添付します。

この関数は、ユーザーがHTML要素をクリックしたときに実行されます。

次の例では、次のように述べています。clickイベントが`<p>`要素に対して発生したとき。現在の`<p>`要素を隠す。

#### **例**
[sample4-1.html]

<p>If you click on me, I will disappear.</p>
  <p>Click me away!</p>
  <p>Click me too!</p>
  
</body>
</html>
```

#### **実行結果**
<pre>
<span class="nocode">
<iframe src="javascript: '<html><script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot></script>

<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>

</body>
</html>'" width="800"></iframe>
</span>
</pre>

### **dblclick()**

この`dblclick()`メソッドは、イベントハンドラ関数をHTML要素に添付します。

この関数は、ユーザーがHTML要素をダブルクリックしたときに実行されます。

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

<p>If you double-click on me, I will disappear.</p>
  <p>Click me away!</p>
  <p>Click me too!</p>

</body>
</html>
```

#### **実行結果**
<pre>
<span class="nocode">
<iframe src="javascript: '<html><script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot></script>
<script>
$(document).ready(function(){
  $(&quot;p&quot;).dblclick(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>

<p>If you double-click on me, I will disappear.</p>
  <p>Click me away!</p>
  <p>Click me too!</p>

</body></html>'" width="800"></iframe>
</span>
</pre>

### **mouseenter()**

この`mouseenter()`メソッドは、イベントハンドラ関数をHTML要素に添付します。

この関数は、マウスポインタがHTML要素に入ったときに実行されます。

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

```
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#p1").mouseenter(function(){
    alert("You entered p1!");
  });
});
</script>
</head>
<body>

<p id="p1">Enter this paragraph.</p>

</body>
</html>

### **mouseleave()**

この`mouseleave()`メソッドは、イベントハンドラ関数をHTML要素に添付します。

この関数は、マウスポインタがHTML要素を離れると実行されます。

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

```
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#p1").mouseleave(function(){
    alert("Bye! You now leave p1!");
  });
});
</script>
</head>
<body>

<p id="p1">This is a paragraph.</p>

</body>
</html>

### **mousedown()**

この`mousedown()`メソッドは、イベントハンドラ関数をHTML要素に添付します。

この関数は、マウスがHTML要素上にあるときにマウスの左ボタン、中央ボタン、または右ボタンが押されると実行されます。

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

```
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#p1").mousedown(function(){
    alert("Mouse down over p1!");
  });
});
</script>
</head>
<body>

<p id="p1">This is a paragraph.</p>

</body>
</html>

```
### **実行結果：**
<pre>
<span class="nocode">
<iframe src="javascript: '<html><script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot></script>
<script>
$(document).ready(function(){
  $(&quot;#p1&quot;).mousedown(function(){
    alert(&quot;Mouse down over p1!&quot;);
  });
});
</script>
</head>
<body>
  <p id=&quot;p1&quot;>This is a paragraph.</p>
</body></html>'" width="800"></iframe>
</span>
</pre>

### **mouseup()**

この`mouseup()`メソッドは、イベントハンドラ関数をHTML要素に添付します。

この機能は、マウスがHTML要素上にあるときにマウスの左、中、右ボタンが離されると実行されます。

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

```
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#p1").mouseup(function(){
    alert("Mouse up over p1!");
  });
});
</script>
</head>
<body>

<p id="p1">This is a paragraph.</p>

</body>
</html>

### **hover()**
`hover()`この方法は、2つの機能を取り、の組み合わせであるmouseenter()と、mouseleave() 方法。

最初の関数はマウスがHTML要素に入ったときに実行され、2番目の関数はマウスがHTML要素を離れたときに実行されます。

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

```
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#p1").hover(function(){
    alert("You entered p1!");
  },
  function(){
    alert("Bye! You now leave p1!");
  }); 
});
</script>
</head>
<body>

<p id="p1">This is a paragraph.</p>

</body>
</html>

```
#### **実行結果**
<pre>
<span class="nocode">
<iframe src="javascript: '<html><script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot></script>
<script>
$(document).ready(function(){
  $(&quot;#p1&quot;).hover(function(){
    alert(&quot;You entered p1!&quot;);
  },
  function(){
    alert(&quot;Bye! You now leave p1!&quot;);
  }); 
});
</script>
</head>
<body>
<p id=&quot;p1&quot;>This is a paragraph.</p>
</body></html>'" width="800"></iframe>
</span>
</pre>

### **focus()**
この`focus()`メソッドは、イベントハンドラ関数をHTMLフォームフィールドに添付します。

フォームフィールドにフォーカスが移ったときに関数が実行されます。

### **blur()**
この`blur()`メソッドは、イベントハンドラ関数をHTMLフォームフィールドに添付します。

フォームフィールドがフォーカスを失うと、関数が実行されます。

#### **例**
[sample4-8.html]

```
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("input").focus(function(){
    $(this).css("background-color", "#cccccc");
  });
  $("input").blur(function(){
    $(this).css("background-color", "#ffffff");
  });
});
</script>
</head>
<body>

Name: <input type="text" name="fullname"><br>
  Email: <input type="text" name="email">

</body>
</html>

```
#### **実行結果**
<pre>
<span class="nocode">
<iframe src="javascript: '<html><script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot></script>
<script>
$(document).ready(function(){
  $(&quot;input&quot;).focus(function(){
    $(this).css(&quot;background-color&quot;, &quot;#cccccc&quot;);
  });
  $(&quot;input&quot;).blur(function(){
    $(this).css(&quot;background-color&quot;, &quot;#ffffff&quot;);
  });
});
</script>
</head>
<body>
Name: <input type=&quot;text&quot; name=&quot;fullname&quot;><br>
Email: <input type=&quot;text&quot; name=&quot;email&quot;>
</body></html>'" width="800"></iframe>
</span>
</pre>

### on()
この`on()`メソッドは、選択した要素に1つ以上のイベントハンドラを添付します。

クリックイベントを`<p>`要素に添付します。

#### **例**
[sample4-9.html]

<p>If you click on me, I will disappear.</p>
  <p>Click me away!</p>
  <p>Click me too!</p>

</body>
</html>
```

#### **実行結果**
<pre>
<span class="nocode">
<iframe src="javascript: '<html><script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot></script>
<script>
$(document).ready(function(){
  $(&quot;p&quot;).on(&quot;click&quot;, function(){
    $(this).hide();
  });
});
</script>
</head>
<body>

<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>

</body></html>'" width="800"></iframe>
</span>
</pre>

`<p>`要素に複数のイベントハンドラを添付します。

#### **例**
[sample4-10.html]

```
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("p").on({
    mouseenter: function(){
      $(this).css("background-color", "lightgray");
    },  
    mouseleave: function(){
      $(this).css("background-color", "lightblue");
    }, 
    click: function(){
      $(this).css("background-color", "yellow");
    }  
  });
});
</script>
</head>
<body>

<p>Click or move the mouse pointer over this paragraph.</p>

</body>
</html>
``` 
#### **実行結果**
<pre>
<span class="nocode">
<iframe src="javascript: '<html><script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot></script>
<script>
$(document).ready(function(){
  $(&quot;p&quot;).on({
    mouseenter: function(){
      $(this).css(&quot;background-color&quot;, &quot;lightgray&quot;);
    },  
    mouseleave: function(){
      $(this).css(&quot;background-color&quot;, &quot;lightblue&quot;);
    }, 
    click: function(){
      $(this).css(&quot;background-color&quot;, &quot;yellow&quot;);
    }  
  });
});
</script>
</head>
<body>

<p>Click or move the mouse pointer over this paragraph.</p>

</body></html>'" width="800"></iframe>
</span>
</pre>

> **jQueryイベントのリファレンス**
>>全てのjQueryイベントの参考のために、jQueryのイベントのリファレンスをご覧ください。

<a href="http://semooh.jp/jquery/api/events/" target="_blank">http://semooh.jp/jquery/api/events/<a>

***

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

focusメソッドで「名前に漢字を入力してください！」をコンソールで出力します。

<pre>
<span class="nocode">
<iframe src="javascript: '<html><script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot></script>
<script>
$(document).ready(function(){
  $(&quot;input&quot;).focus(function(){
    alert(&quot;名前に漢字を入力してください！&quot;);
  });
});
</script>
<body>

名前: <input type=&quot;text&quot; name=&quot;fullname&quot;>

</body></html>'" width="800"></iframe>
</span>
</pre>

content

第4章 jQuery イベントメソッド

第4章　jQuery イベントメソッド