jQueryでonメソッドを使ってイベントの処理を設定する方法【初心者向け】

プログラミング初心者向けに、jQueryのonメソッドを使ってイベントの処理を設定する方法を解説しています。jQueryを使う上でonメソッドは必ず使う知識になるので、学習中の方はぜひ自分で書いてみて理解していきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

JavaScriptのライブラリであるjQueryでonメソッドを使ってイベントを設定する方法を解説しています。jQueryを使う上でよく使用するメソッドなので非常に便利です。自分でも書いてみて覚えていきましょう。

jQueryについてそもそもよく分からないという方は、jQueryとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

20160620

 

田島メンター!取得した要素にイベントを設定するメソッドなどは、jQueryにはありますか?

 

20163020-2

 

onメソッドで設定するのがいいよ。

 

20160620

 

onイベントってありましたっけ?

 

20163020-2

 

onメソッドの場合、引数にイベント名と処理を書くんだよね。実際に書いてみよう!

 

onメソッドとは

onメソッドとはjQuery1.7から推奨となったイベントをセットするためのメソッドです。

.bind()、.live()、.delegate()など、jQuery1.7以前はイベントセットのためのメソッド乱立しており、状況によって使い分けなければならず、使用者を悩ませていました。

そうしたことを改善するためにonメソッドは登場しました。

このメソッド一つで様々なイベントセットに対応することができるので、実際に現場で使用する際は頻繁に使用されるメソッドです。

onメソッドの書き方

基本的な書き方は以下の通りです。

$(‘セレクタ’).on(‘イベント’, 処理);

delegateなどで使用する場合はイベントの後ろに”発火点”と呼ばれる引数が入ります。ただ少し難しい内容になるので今回は省略させていただきます。

初めのうちは慣れるためにもイベント、処理と二つの引数で使用すると良いでしょう。

 

実際に書いてみよう

今回はclickメソッドをonメソッドを使用して書き換えてみたいと思います。

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    <script>
      $("button").on("click", function() {
        alert("click!!!");
      });
    </script>
  </head>
  <body>
    <button>ボタン</button>
  </body>
</html>

通常ボタンをクリックした際のイベントを指定する時は以下のような処理を使用します。

その処理を今回はonメソッドで代用しました。

 

 

[PR] プログラミングで挫折しない学習方法を動画で公開中

まとめ

今回はonメソッドについて解説していきました。

今回はほんの一例の紹介で、他にもonメソッドにはコードを見やすく実装する機能が沢山あります。jQueryのコードを沢山書くようになるとonメソッドのありがたみがわかってくると思います。

onメソッドで処理を書いておいて損はないので、今からonメソッドを使用する癖をつけるようにしましょう。

 

20160620

 

clickメソッドを使うより、onメソッドのほうがいいですね。

 

20163020-2

 

bindやliveやdelegateを統合したものなんだけど、onメソッドのほうが良い点が多いんだ。

 

20160620

 

複数のイベントを設定したり、イベントをオフにしたりは出来るんですか?

 

20163020-2

 

もちろん。イベント名設定のところをスペースで区切ると、複数のイベントを設定できるし、on({‘イベント名’: function(){…},’イベント名’: function(){…}
})で、それぞれ別のイベントを設定できるんだ。削除するには、offメソッドの中にイベント名を書くだけだよ。

 

[お知らせ]TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。jQueryを使ってリッチなWebサービスを作りたい方はぜひご覧ください。