JavaScript

jQueryでonメソッドを使ったイベントの設定方法を解説

jQueryを用いれば、HTML、CSSのみで書かれたWebページに動きをつけることができます。特にクリックやスクロールといったイベントに対して様々な処理を行います。サイトを訪れたユーザーの目を引くのに有効です。

イベントの設定にはonメソッドを使います。本記事では、jQueryでonメソッドを使ってイベントを設定する方法を紹介します。jQueryの中でも使う頻度が多いと思うので、ぜひ参考にしてください。

onメソッドを使ったイベントの基本構文

onメソッドを使ったイベントの基本構文は以下の通りです。

$(“セレクタ”).on(“イベント”,function(){

処理;

});

セレクタの部分にはイベントの起点となるタグやクラス、id、documentやwindowといったオブジェクトを指定します。onの後には第一引数として、イベントを入れます。クリックするイベントだとしたら、”click”と入れます。

第二引数にはfunction()を入れます。その後、中括弧{}内に入るのが処理内容です。第二引数はオブジェクトデータやデリゲートを使うときにはfunction()以外が入り、第三引数以降にfunction()を入れることがあります。

詳しくは下の「onイベントの使い方」で解説します。

on イベント一覧

ここではonで使うイベントの代表を紹介しています。よく使うものを抜粋しているので参考にしてください。

イベント名コード
clickクリックされたとき
dbclickダブルクリックされたとき
mousedown要素上でマウスが押されたとき
mouseup要素上でマウスが押され、上がったとき
scrollスクロールされたとき
resize画面(ウィンドウ)のサイズが変わったとき
loadロードされたとき
submitフォームが送信されたとき
errorエラーが発生したとき(JavaScript)
mouseenterマウスが要素に入ったとき
mouseleaveマウスが要素から外れたとき

他にもいろいろなイベントがあります。googleで「on イベント 一覧」や本を開いて確認してみてください。

onイベントの使い方

複数イベントを設定する

複数のイベントに対して同じ処理をする場合は、イベントとイベントの間にスペースを入れます。例えば、クリックとダブルクリックで同じセレクタに対して同じ処理をする場合に使います。例は以下の通りです。

$(“button”).on(“mouseenter mouseleave ”,function(){

console.log(“OK”);

});

mouseenterとmouseleaveの間にはスペースが入っています。上のコードの場合、buttonの中に入ったり、出たりするとコンソールに「OK」と表示されます。

オブジェクトデータを渡す

第二引数にオブジェクトにデータを設定することで、処理の中でオブジェクトを使うことができます。例は以下の通りです。

   $(“button”).on(“click”,{name:’WORLD’},function(e){

      console.log(‘HELLO ‘ + e.data.name);  

    });

buttonを押すとコンソール上に「HELLO WORLD」と表示されます。第二引数にnameというオブジェクトを用意し、WORLDというデータを用意します。functionにはイベントを示すeを引数として渡します。

処理の中の「e.data.name」でイベントが発生した時にnameオブジェクトのデータを呼び出します。function()で使うことは少なく、処理外のところに関数を用意し、関数を呼び出すことがほとんどです。

デリゲートを使ったイベントの設定

デリゲートとはイベントが発生した要素と別の要素がイベント処理をすることです。例として下のコードを見てください。

<body>

  <div>

    <p>クリックされていません</p>

    <p>クリックされていません</p>

    <p>クリックされていません</p>

  </div>

  <script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js”></script>

  <script>

    $(“div”).on(“click”,”p”,function(){

        $(this).text(“クリックされました”);

    });

  </script>

</body>

通常であれば$(“p”).on(“click”,function(){~})と書きます。その方がコードも短いしシンプルだと感じたのではないでしょうか。しかし、$(‘p’)だと3つのpに対してイベント処理が発生しています。

一方、例に挙げたコードでは対象要素をdivにすることでイベント処理が登録されているのは1つだけです、引数にpを置くことで、p全てにイベント処理を実行することができます。また、pに後から別のイベントを追加することも可能です。

まとめ

jQueryでonメソッドを用いたイベントの設定方法を解説しました。複雑な処理もあり、難しく感じることもあると思います。しかし、イベントの設定はバリエーションが多いほど、Webページ上にいろんな動きをつけられます。

jQueryを使う際はイベントで処理を書くことが多くなると思います。記事を参考にしていろんなイベントを書けるようになれば幸いです。ぜひ、挑戦してみてください。