【初級編4】jQuery 必須事項「イベント」の基本理解

javascript
jquery event(イベント)編

前回記事ではセレクタ(selector)について説明いたしました。

セレクタではHTML構造文書(タグ)のある場所を指定するために必要な機能です。
今回のイベント(event)については、その要素に対して「何をしたら」という内容をお伝えします。

jQuery イベント(event)とは

重複してしまいますが、「何をしたら」という振る舞いについていくつか定義をお伝えします。

jQueryイベント
  • ある「要素」に対して
  • 1.クリックする = click
  • 2.マウスカーソルを乗せる = mouseover
  • 3.マウスカーソルを外す = mouseleave

などがあります。

イベントの項目はたくさんありますので是非ともリファレンスを参考にしてください。

jQuery Event Methods
Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XM...

jQueryでのイベント指定方法

前回と同様にHTMLとjQueryを実践してみましょう。

<html> <head>
</head>
<body>
<div class="main">
 <h1>〜ここにタイトル〜</h1>
 <p class="description">〜ここに本文〜</p>
 <p class="assistance">〜補助文〜</p>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$('div.main h1').on("click", function(){
  $(this).css("color","red");
});
</script>
</body>
</html>

上記をコピペして、「20190629.html」などの名称で保存してみてください。

開いたときは〜タイトル〜、〜ここに本文〜、〜補助分〜として表示されていると思います。

今回のイベントは「ある要素を」「event『クリックした時』」「赤文字にする」するというクリックイベントを利用しました。
保存後、ファイルを開いて〜ここにタイトル〜部分をクリックすると赤文字になることがわかると思います。

続いてmouseover / blurのイベントを使う

<head> </head>
<body>
<div class="main">
 <h1>〜ここにタイトル〜</h1>
 <p class="description">〜ここに本文〜</p>
 <p class="assistance">〜補助文〜</p>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
// マウスカーソル(フォーカス)が当たっている時
$('div.main h1').on("mouseover", function(){
  $(this).css("color","blue");
});
// マウスカーソルが外れた時
$('div.main h1').on("mouseleave", function(){
  $(this).css("color","red");
});
</script>
</body>
</html>

ではmouseover / mouseleave要素を使ってみましょう。

h1要素にマウスを乗せると青
h1要素からマウスを外すと赤
になると思います。

冗長的な書き方となっていますが、気にしないでください

イベント要素のおさらい

イベントの使い方は以下を参考にしましょう。

イベント知識
  • ある要素に対して「何かしらの動作」をした時に動作させる
  • クリックした時
  • マウスカーソルを乗せた時(外した時)
  • 今回は触れていませんが、スクロールした時など

このイベントを覚えることによって、ある要素に対して様々なイベント条件を作ることができます。

まとめ

前回記事では「セレクタ」を覚えましたが、それと組み合わせる必要がある「イベント」について簡単に述べました。

jQuery必要知識
  • セレクタ
  • イベント
  • 要素の変更

jQueryを覚えるのに欠かせない3つのうち2つまで覚えました。

次はイベントが起きた時に何をするか?「要素の変更」について書きたいと思います。

Ads オススメの勉強サイト

米国シリコンバレー発祥、世界最大級のオンライン学習プラットフォーム!

最短で技術を身に付けたい場合は有料ではありますが、実績のあるUdemyがオススメです!

コメント

タイトルとURLをコピーしました