第8回　jQueryのイベントを理解しよう

イベントとは

今回はイベントを作っていきます。
javascriptでイベントというのは、祭りとか、コンサートとか
そういうものではなく、何かの入力や、動作によって引き起こされる
処理のことです。
今回は、利用頻度が1番多いクリックによって発生する処理を書いていきます。
まずは書き方をみてみましょう。

クリックされるとイベントがおこる

$(document).on('click', '要素名', function(){
    処理
});

$(document).on('click', '要素名', function(){

処理

});

解説です。
documentというのはHTML全体のことです。jQueryのセレクタに
documentを入れています。続いてclick要素名、つまり、『documentの中の
「要素名」がクリックされたらfunction(){ }の中の処理を実行しなさい』という
意味になります。
クリックされたら処理が行われるのでこれを「クリックイベント」と呼びます
そしてイベントが呼び出されることを発火と呼ぶことが多いので、
これも合わせて覚えてください。
サンプルとサンプルソースを以下に記載します。

HTML部分

jqueryの読み込みは次の内容をコピーして利用してください。

<script
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>

<script

src="https://code.jquery.com/jquery-3.2.1.js"

integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="

crossorigin="anonymous"></script>

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script
    src="https://code.jquery.com/jquery-3.2.1.js"
    integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
    crossorigin="anonymous"></script>
    <script type="text/javascript"  src='event.js'></script>
    <title>イベントサンプル</title>
</head>
<body>
    <div id="div-1" class="class-div-1">1</div>
    <div id="div-2" class="class-div-2">2</div>  
    <div id="div-3" class="class-div-3">3</div>  
</body>
</html>

<!DOCTYPE html>

<head>

<script

src="https://code.jquery.com/jquery-3.2.1.js"

integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="

crossorigin="anonymous"></script>

<title>イベントサンプル</title>

</head>

<body>

</body>

</html>

CSS (style.css)

.class-div-1{
    background-color:brown;
}

.class-div-2{
    background-color:aqua;
}

.class-div-3{
    background-color:blueviolet;
}

.class-div-1{

background-color:brown;

}

.class-div-2{

background-color:aqua;

}

.class-div-3{

background-color:blueviolet;

}

javascript (event.js)

$(document).on('click', '#div-1', function(){
    alert("クリックしましたね。");
});

$(document).on('click', '#div-1', function(){

alert("クリックしましたね。");

});

javascriptでdiv-1のidを持つ要素（場所）をクリックした場合イベントが発火
します。

始めてのクリックイベントは「クリックしましたね」を表示

function(){ }内の処理内容は「クリックしましたね」とアラートを
出す処理内容です。
結果としては、一番上の茶色のdivをクリックするとメッセージが表示されます。
実際にVS Codeに入力して確認してみましょう。

イベントサンプル

HTML部分の上の方はごちゃごちゃしてますが、jQueryの読み込みだけなので
コピペするだけなので安心してください。
今回はCSSを利用しており、classで色分けを行なっています。
body部では、3つのdivに対してidとクラスを記載しています。

javascriptにはイベントを1つ書いています。イベントのセレクタとして
「#div-1」を指定しています。
このサンプルの処理をまとめると、『idがdiv-1の要素をクリックされたら
alert()を発火しろ！』という処理になります。
それでは実際に課題を解いてみましょう。

・div2、div3にもidをセレクタとして、クリックイベントを追加してください。
クリックしたらアラートを表示するようにしてください。

・上の課題のセレクタをクラスで指定するように変更してください。

jQueryの機能を使ってみる。

イベントの使い方は理解できたと思うので、アラートだけではなく
jQueryの色々な機能を使ってみましょう。
今まで説明したjQueryの機能は次2つでしたね。

$(セレクタ).text();	セレクタが設定されたHTMLの中のテキストを取得、又は変更する
$(セレクタ).val();	セレクタが設定された入力欄の中のテキストを取得したり変更する。

今回は次の3つを紹介します。

$(セレクタ).hide();	セレクタに一致した要素を非表示にする
$(セレクタ).show();	セレクタに一致した非表示の要素を再表示する
$(セレクタ).toggleClass(クラス名);	セレクタの要素について、指定されたクラスがあればクラスを削除し、クラスがない場合はクラスを追加する

それでは1つづつ使い方をみてみましょう。

jQueryのhide文、show文

まずは要素を非表示にします。

この文字を非表示にしてみましょう。

上の文字は、内側のspanにidが付加されています。
実際にコンソールからhide文を使って上の文字を消してみてください。
消えたことが確認できたら再表示してみましょう。

jQueryのtoggleClass文

次の文字のクラスをつけたり外したりしてみましょう。

トグルテストです。

同じtoggleClass文を実行するたびにクラスがついたり
消えたりすることが確認できましたね。
トグルを使う上での注意事項として、toggleのセレクタに
変更したいクラスをかくと、クラスが消えた時にセレクタ
が見つからなくなってしまうのでid又は、変更されないクラスを使うようにしましょう。

作成したサンプルプログラムについて次の動作をするようにプログラムを
変更してください。

1番上のdivをクリックした場合に1番上のdivを非表示にするようにしてください。
2番目のdivをクリックした場合は1番目のdivを再表示するようにしてください。
3番目のdivをクリックした場合は3番目のdivのクラスを付加、削除を繰り返すようにしてください。

課題ができたら読んでね

1つ追加で覚えておいてほしいことがあります。
今回学んだことはクリックイベントですので、もちろんクリックした時に
動作するのですが、よくあるケースで、他の場所でクリックと同じ処理をクリックせずに
発生させたいケースがあります。
その場合は下記のように記載することでイベントを発生させることができるので
覚えておいてください。

$(セレクタ).trigger('click');

1	$(セレクタ).trigger('click');

実際にサンプルで試してみましょう。
イベントサンプル

サンプルの一番上の要素はclickイベントが設定されているので
コンソールから上のプログラムを入力してクリックイベントを発生させてみます。

$('#div-1').trigger('click');

1	$('#div-1').trigger('click');

クリックしていないのにメッセージが表示されましたね。

jQueryのイベント操作についてまとめ

HTMLの要素にはイベントを追加することができる
イベントを設定する要素はセレクタで選択する
hide()で要素を削除することができる
show()で要素を再表示することができる
toggleClassでクラスのつけ外しができる
triggerを用いると要素に割り当てられたイベントを無理やり発生させることができる

宿題_jQueryイベント

上のサンプルプログラムの2つめ、3つめのdivがクリックされた場合は
triggerを使って1つめのdivがクリックされたものとして処理してください。

※2番目、3番目のdivのクリックイベントにはトリガーを書いて1番が
クリックされたようにしてください。