お問い合わせ

知ってた？ナルホド！BLOG

2018.12.03

onメソッドで出来ること

WRITTEN BY

 | 

HIRAHARA NATSUMI

.on()メソッドで出来ること

「on()メソッド」は「click」イベントを実行したい時によく使用します。
普段何気なく使ってきた「on()メソッド」ですが、調べてみると、「on()メソッド」で使用できるイベントタイプは「click」イベントの他にも多数あることがわかりました。

今回は、「on()メソッド」で使用できるイベントタイプと、それを使った簡単なサンプルを作成しご紹介していきます。

  1. 『on()メソッド』とは
  2. 『mouseenter』イベントと『mouseleave』イベント
  3. 『mousemove』イベント
  4. 『mousedown』イベントと『mouseup』イベント
  5. 『focus』イベントと『blur』イベント
  6. 『keyup』イベント
  7. まとめ

1. 『on()メソッド』とは

「on()メソッド」は、引数に「イベント名」と「function」を設定し、指定した要素に対してイベントが発生した時に、処理を実行することができます。

下記は「on()メソッド」の引数に「click」イベントを設定した事例です。

「button_click」クラスを「click」した時に、「button_click」クラスに「active」クラスを付け替えることで、ボタンの色を変更しています。

それでは、「on()メソッド」の特徴を使って、引数に様々なイベント名を設定してみましょう。

2. 『mouseenter』イベントと『mouseleave』イベント

「mouseenter」イベントは、マウスカーソルが指定した要素に乗っている間に処理を実行することができます。
対して、「mouseleave」イベントは、マウスカーソルが指定した要素から外れた時に処理を実行することができます。

「mouseover」した時には、「button_overleave」クラスに「active」クラスを付け、ボタンの色を赤に変えます。
「mouseleave」した時には、「button_overleave」クラスから「active」クラスを外し、ボタンの色を元に戻します。

3. 『mousemove』イベント

「mousemove」イベントは、指定した要素の上でマウスポインターを動かすたびに処理を実行することができます。

「button_move」クラスを「mousemove」した時に、マウスカーソルのx軸とy軸の位置を取得して、「button_move_text_x」と、「button_move_text_y」クラスのspanタグに表示します。

4. 『mousedown』イベントと『mouseup』イベント

「mousedown」イベントは、マウスカーソルが指定した要素の上にある状態で、マウスキーが押された時に処理を実行することができます。
対して、「mouseup」イベントは、マウスカーソルが指定した要素の上にある状態で、マウスキーが離された時に処理を実行することができます。

「mousedown」した時には、「button_downup」クラスのテキストを「mousedown」に、ボタンの色を黒に変更します。
「mouseup」した時には、「button_downup」クラスのテキストを「mouseup」に、ボタンの色を赤に変更します。
マウスキーが離れている時は、2でご紹介した「mouseleave」を使用し、ボタンの色を元に戻します。

5. 『focus』イベントと『blur』イベント

「focus」イベントは、指定した要素にフォーカスした時に、処理を実行することができます。
対して、「blur」イベントは、指定した要素からフォーカスが外れた時に、処理を実行することができます。

「focusblur」クラスが「focus」を得た時に、テキストフィールドの枠の色を黄色に変更します。
「focusblur」クラスが「focus」を失った時に、テキストフィールドの枠の色を元に戻します。

6. 『keyup』イベント

「keyup」イベントは、指定した要素でキーボードのキーを離した時に、処理を実行することができます。

「key」クラスがついたテキストフィールドにフォーカスした状態でキーボードのキーを押して離した時、「key_text」クラスへ「key」クラスに入力した文字を表示します。

7. まとめ

このように、「on()メソッド」で使用できるイベントタイプには、それぞれ特徴があります。
適宜、イベントタイプを指定することにより、様々な機能を実装することができるのです。

皆さんも「on()メソッド」を、WebサイトやWebアプリの開発に活かしてみてはいかがでしょうか！

参考サイト :

# CATEGORY

# ARCHIVE

# こちらもオススメ

BLOG一覧へ戻る

PAGE TOP