jQueryでonメソッドを使ってイベントの処理を設定する方法【初心者向け】
プログラミング初心者向けに、jQueryのonメソッドを使ってイベントの処理を設定する方法を解説しています。jQueryを使う上でonメソッドは必ず使う知識になるので、学習中の方はぜひ自分で書いてみて理解していきましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptのライブラリであるjQueryでonメソッドを使ってイベントを設定する方法を解説しています。jQueryを使う上でよく使用するメソッドなので非常に便利です。自分でも書いてみて覚えていきましょう。
jQueryについてそもそもよく分からないという方は、jQueryとは何なのか解説した記事をまずご覧ください。
なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。
田島メンター！取得した要素にイベントを設定するメソッドなどは、jQueryにはありますか？
onメソッドで設定するのがいいよ。
onイベントってありましたっけ？
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メソッドで代用しました。
まとめ
今回はonメソッドについて解説していきました。
今回はほんの一例の紹介で、他にもonメソッドにはコードを見やすく実装する機能が沢山あります。jQueryのコードを沢山書くようになるとonメソッドのありがたみがわかってくると思います。
onメソッドで処理を書いておいて損はないので、今からonメソッドを使用する癖をつけるようにしましょう。
clickメソッドを使うより、onメソッドのほうがいいですね。
bindやliveやdelegateを統合したものなんだけど、onメソッドのほうが良い点が多いんだ。
複数のイベントを設定したり、イベントをオフにしたりは出来るんですか？
もちろん。イベント名設定のところをスペースで区切ると、複数のイベントを設定できるし、on({‘イベント名’: function(){…},’イベント名’: function(){…}
})で、それぞれ別のイベントを設定できるんだ。削除するには、offメソッドの中にイベント名を書くだけだよ。
[お知らせ]TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。jQueryを使ってリッチなWebサービスを作りたい方はぜひご覧ください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
