Sossyの助太刀ブログ 
・IT/Web系エンジニアの経験者の方
・どこの転職エージェントを利用しようか迷っている方
それなら、キッカケエージェントにご相談！
キッカケエージェントでは、少数精鋭のエージェントが、エンジニアの経験やスキル、志向性などをカウンセリングし、的確なアドバイスを提供します！
また、徹底した企業へのヒアリングにより、最適なマッチングを実現し、今では内定率が一般的なエージェントの2倍以上となっています！
転職エージェントに迷っている方、まずは無料でキャリア相談から！
(この記事は2023年08月26日に投稿されました。)
jQueryで要素にイベントの設定を行うにはon()を使用します。
on()とは、セレクタにイベント後の処理を紐づけるメソッドであり、多数あるイベント発生後の処理を要素に設定することができます。
そのため、画面上のオブジェクトへのイベント制御はon()で実装することがほぼ可能です。
また、on()はイベントハンドラに対して1つのイベントだけでなく、複数のイベントを割り当てることができるので、複数のイベント処理をまとめることができます。
イベント名を変えるだけでさまざまなイベント発生に対応できるため、もしjQueryで要素にイベント処理を設定したい場合はon()を使用するようにしましょう。
今回は、jQueryのon()で要素にイベントの設定を行う方法について紹介していきます。
イベントが発生した時に要素へ何かしらの処理を実行させたい場合
Webページの読み込みが完了してから処理を実行させたい場合
on()とは
on()とはセレクタにイベント後の処理を紐づけるメソッドとなります。
イベント後の処理を紐づけるため、「A」というセレクタに対して「B」というイベントが発生すると「C」の処理を行うよう設定することができます。
on()の書き方
on()の書き方は下記となります。
1 | $(セレクタ).on(イベント名 [,セレクタ] [,オブジェクトデータ], イベントハンドラ); |
セレクタの後ろにon()を追記し、必須な引数を2つを指定して使用します。
また、任意な引数を2つ追加して指定することができ、合計4つの引数を指定して使用することができます。
on()の引数
on()の引数は下記のようになります。
- イベント:(必須)
イベント名を指定する
(clickやloadなど) - セレクタ(任意)
イベントを割り当てたいセレクタを指定する
(フィルタリングする) - オブジェクトデータ(任意)
イベントオブジェクトに渡すデータをオブジェクトで指定する - イベントハンドラ:(必須)
イベント発生後の処理を関数で指定する:
on()は、必須な引数として「イベント」や「イベントハンドラ」を指定します。
また、任意な引数として「セレクタ」や「オブジェクトデータ」を指定することができます。
on()で要素にイベント処理の設定を行うサンプルコード
on()で要素にイベント処理の設定を行うサンプルコードをご紹介します。
イベントの種類はたくさんありますが、ここでは厳選した下記の5パターンでon()を使用します。
- スクロールのイベント処理の設定を行う場合
- クリックのイベント処理の設定を行う場合
- マウスのイベント処理の設定を行う場合
- キーのイベント処理の設定を行う場合
- タッチのイベント処理の設定を行う場合
スクロールのイベント処理の設定を行う場合
on()でクロールのイベント処理の設定を行うにはscrollを指定します。
● index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>on()で要素のイベント処理の設定を行う</title> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="main.js"></script> </head> <body> <h2>on()でスクロールイベント発生時に処理を行う</h2> <div class= "ret"></div> </body> </html> |
● style.css
1 2 3 4 5 6 7 8 9 | .ret { border: 2px solid black; width: 100px; height: 100px; } body { width: 2000px; height: 1000px; } |
● main.js
1 2 3 4 5 | $(window).on("load", function(){ $(window).on("scroll", function(){ $('.ret').css("background", "green"); }); }); |
実行結果
on()によってスクロールイベント発生時に処理を行っています。
そのため、Webページをスクロールすると、要素の色が緑色に変化しています。
クリックのイベント処理の設定を行う場合
on()でクリックのイベント処理の設定を行うにはclickを指定します。
● index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>on()で要素のイベント処理の設定を行う</title> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="main.js"></script> </head> <body> <h2>on()でクリックイベント発生時に処理を行う</h2> <div class= "ret"></div> </body> </html> |
● style.css
1 2 3 4 5 | .ret { border: 2px solid black; width: 100px; height: 100px; } |
● main.js
1 2 3 4 5 | $(window).on("load", function(){ $(".ret").on("click", function(){ $(this).css("background", "blue"); }); }); |
実行結果
on()によってクリックイベント発生時に処理を行っています。
そのため、要素をクリックすると色が青色に変化しています。
マウスのイベント処理の設定を行う場合
on()でマウスのイベント処理の設定を行うには複数のイベントがありますが、今回はmouseenterを指定します。
● index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>on()で要素のイベント処理の設定を行う</title> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="main.js"></script> </head> <body> <h2>on()でマウスイベント発生時に処理を行う</h2> <div class= "ret"></div> </body> </html> |
● style.css
1 2 3 4 5 | .ret { border: 2px solid black; width: 100px; height: 100px; } |
● main.js
1 2 3 4 5 | $(window).on("load", function(){ $(".ret").on("mouseenter", function(){ $(this).css("background", "pink"); }); }); |
実行結果
on()でマウスイベント発生時に処理を行っています。
そのため、要素内にマウスを移動させると、要素の色がピンク色に変化しています。
キーのイベント処理の設定を行う場合
on()でキーのイベント処理の設定を行うには複数のイベントがありますが、今回はkeypressを指定します。
● index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>on()で要素のイベント処理の設定を行う</title> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="main.js"></script> </head> <body> <h2>on()でキーイベント発生時に処理を行う</h2> <div class= "ret"></div> </body> </html> |
● style.css
1 2 3 4 5 | .ret { border: 2px solid black; width: 100px; height: 100px; } |
● main.js
1 2 3 4 5 | $(window).on("load", function(){ $(document).on("keypress", function(){ $('.ret').css("background", "yellow"); }); }); |
実行結果
on()でキーイベント発生時に処理を行っています。
そのため、キーを入力すると、要素の色が黄色に変化しています。
タッチのイベント処理の設定を行う場合
on()でタッチイベン発生時に処理を行うには、複数のイベントがありますが、今回はtouchstartを指定します。
● index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>on()で要素のイベント処理の設定を行う</title> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="main.js"></script> </head> <body> <h2>on()でタッチイベント発生時に処理を行う</h2> <div class= "ret"></div> </body> </html> |
● style.css
1 2 3 4 5 | .ret { border: 2px solid black; width: 100px; height: 100px; } |
● main.js
1 2 3 4 5 | $(window).on("load", function(){ $(".ret").on("touchstart", function(){ $(this).css("background", "gray"); }); }); |
実行結果
on()によってイベント発生時に処理を行っています。
そのため、要素をクリックすると色が青色に変化しています。
on()でイベントを複数設定して要素にイベント処理の設定を行う場合
イベントを複数設定して要素にイベント処理の設定を行うにはon()のイベントに半角空白を空けてイベント名を指定します。
そのため、「AやB」のイベントが発生すると「C」の処理を行うというような内容を設定することができます。
● index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>on()で要素のイベント処理の設定を行う</title> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="main.js"></script> </head> <body> <h2>on()でイベントを複数設定して処理を行う</h2> <div class= "ret"></div> </body> </html> |
● style.css
1 2 3 4 5 | .ret { border: 2px solid black; width: 100px; height: 100px; } |
● main.js
1 2 3 4 5 | $(window).on("load", function(){ $(".ret").on("click mouseleave", function(){ $(".ret").css("background", "purple"); }); }); |
実行結果
on()に複数のイベントを指定してイベント発生時に処理を行っています。
そのため、要素をクリックしたりマウスが要素から外れると色が紫色に変化しています。
on()のイベントハンドラに引数を指定する場合
イベントハンドラに引数を指定することで、処理中にイベント情報を渡すことができます。
イベント情報とは、実際に行われたイベント名やオブジェクト名などが記載されたデータであり、オブジェクト形式として渡されます。
● index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>on()で要素のイベント処理の設定を行う</title> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="main.js"></script> </head> <body> <h2>on()でイベントハンドラに引数を指定して処理を行う</h2> <div class= "ret"></div> </body> </html> |
● style.css
1 2 3 4 5 6 7 8 9 | .ret { border: 2px solid black; width: 100px; height: 100px; } .log { font-size: 20px; font-weight: bold; } |
● main.js
1 2 3 4 5 6 7 8 9 10 11 12 13 | $(window).on("load", function(){ $(".ret").on("click mouseenter", function(e){ let target = e.currentTarget.className let event = e.type if(event == "click") { $(".ret").css("background", "red"); } if(event == "mouseenter") { $(".ret").css("background", "green"); } $('.log').text(target + "クラスに対して" + event + "が発生しました。") }); }); |
実行結果
on()でイベントハンドラに引数を指定してイベント発生時に処理を行っています。
そのため、要素をクリックしたりマウスが入ると色が変化し、そのタイミングでイベント発動時のクラス名やイベント名が表示されています。
on()でフィルタリングして要素にイベント処理の設定を行う場合
on()でフィルタリングを行って要素にイベント処理の設定を行うには、on()に「セレクタ」を指定します。
セレクタを指定することで、イベント発生の対象オブジェクトを厳選することができます。
● index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>on()で要素のイベント処理の設定を行う</title> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="main.js"></script> </head> <body> <h2>on()でフィルタリングをして処理を行う</h2> <div class= "ret ret1"></div> <div class= "ret ret2"></div> <div class= "ret ret3"></div> <p class= "log"></p> </body> </html> |
● style.css
1 2 3 4 5 6 | .ret { width: 100px; height: 100px; margin-top: 20px; border: 2px solid black; } |
● main.js
1 2 3 4 5 6 7 | $(window).on("load",function(){ $(document).on('mouseenter', ".ret2", function(event){ $(this).css("background", "black"); let target = event.currentTarget.className $(".log").text(target + 'クラス要素にイベントが発動しました。') }); }) |
実行結果
on()でフィルタリングを行ってイベント発生時に処理を行っています。
そのため、「ret1」と「ret2」と「ret3」の要素にマウスをかぶせると「ret2」クラスの要素のみ要素の色が変化しています。
on()でデータの受け渡しを行って要素にイベント処理の設定を行う場合
on()でータの受け渡しを行って要素にイベント処理の設定を行うには引数に「オブジェクトデータ」を指定します。
オブジェクトデータを指定することで、指定したオブジェクトデータをイベント発生のタイミングで受け渡すことができます。
● index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>on()で要素のイベント処理の設定を行う</title> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="main.js"></script> </head> <body> <h2>on()でデータの受け渡しを行って処理を行う</h2> <input type="text"> <div class= "ret"></div> <p class= "out1"></p> <p class= "out2"></p> </body> </html> |
● style.css
1 2 3 4 5 6 7 8 9 10 | .ret { width: 100px; height: 100px; margin-top: 20px; border: 2px solid black; } .out{ font-size: 15px; font-weight: bold; } |
● main.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | let today = new Date(); let val = [] $(window).on("load",function(){ $("input").blur(function() { val.length = 0; let input = $('input').val() val.push(input) }) $('.ret').on('click',{objData1: today, objData2: val}, function(event){ $(this).css("background", "yellow"); $(".out1").text(event.data.objData1); $(".out2").text(event.data.objData2); }); }); |
実行結果
on()でデータの受け渡しを行ってイベント発生時に処理を行っています。
そのため、イベント処理が行われると、現在の時間と入力フォームで入力した値が表示されています。
on()を使用した実際のケース
on()を使用した実際のケースについてご紹介します。
例えば、PCからファイルを選択し、選択したファイルをプレビューとして表示するようなコードを作成します。
● main.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>on()で要素のイベント処理の設定を行う</title> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="main.js"></script> </head> <body> <h2>on()でPC内の画像を読み込む</h2> <p class="item selectFile">● 画像選択</p> <input type="file" id="inputFile"/> <p class="item preview">● プレビュー</p> <div class= "previewFile"></div> </body> </html> |
● style.css
1 2 3 4 | .item { font-size: 15px; font-weight: bold; } |
● main.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | $(window).on("load",function(){ $("#inputFile").on("change", function (e) { var reader = new FileReader() reader.addEventListener('load', function (e) { $(".previewFile").append('<img id="fileImg"></img>') $("#fileImg").attr("src", e.target.result); }) reader.readAsDataURL(e.target.files[0]); }); $(document).on('mouseenter', '#fileImg', function() { $(this).css("opacity", "0.5") }) $(document).on('mouseleave', '#fileImg', function() { $(this).css("opacity", "1") }) }); |
実行結果
on()でファイルを選択するというイベントの発生時に処理を行っています。
そのため、選択した画像が画面に表示されています。
また、プレビューとして表示された画像にマウスを重ねると透明度が変化しています。
on()と他のイベントメソッドとの違い
jQueryにはon()の他にもイベントに特化したイベントメソッドが存在します。
しかし、それらのメソッドとon()には大きな違いがあります。
それは、動的に作成された要素にも対象になるかどうかです。
言葉だけではイメージがつかみにくいかと思いますので、サンプルコードを2つご紹介します。
クリックイベントの場合
動的に作成された要素に対してのクリックイベントの動きを見てみます。
クリックイベントであるため、今回はon(‘click’)の処理とイベントメソッドであるclick()の処理を比較します。
もし、click()について詳しく知りたい場合は下記の記事をご参考ください。
● index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>on()で要素のイベント処理の設定を行う</title> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script src="main.js"></script> </head> <body> <h2>on('click')とclick()の処理を実行</h2> <p>on()(click)</p> <div class= "on-area"> <div class= "ret on"></div> </div> <p>click()</p> <div class= "click-area"> <div class= "ret click"></div> </div> <button type="button">追加</button> </body> </html> |
● style.css
1 2 3 4 5 6 7 8 9 | .on-area, .click-area { display: flex; } .ret { width: 100px; height: 100px; border: 2px solid black; margin: 2px; } |
● main.js
1 2 3 4 5 6 7 8 9 10 11 12 | $(window).on('load', function() { $(document).on('click',".on", clickEvent) $('.click').click(clickEvent) $('button').click(function() { $('.on-area').append("<div class= 'ret on'></div>") $('.click-area').append("<div class= 'ret click'></div>") }) function clickEvent() { $(this).css('background', 'green') } }) |
実行結果
ページ読み込み完了後に作成された要素に対してはon()もclick()も要素の色が変化しています。
しかし、ボタンを押して作成された要素に対して、on()側の要素は色が変化していますが、click()側の要素は色が変化していません。
そのため、動的に作成した要素に対してon()だと処理が行われていますが、click()では処理が行われていないということがわかります。
フォーカスイベントの場合
続いて、動的に作成された要素に対してのフォーカスイベントを見てみます。
フォーカスイベントであるため、今回はon(‘focus’)の処理とイベントメソッドであるfocus()の処理を比較します。
● index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>on()で要素のイベント処理の設定を行う</title> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script src="main.js"></script> </head> <body> <h2>on('focus')とfocus()の処理を実行</h2> <p>on()(focus)</p> <div class= "on-area"> <input class= "ret on"> </div> <p>focus()</p> <div class= "focus-area"> <input class= "ret focus"> </div> <button type="button">追加</button> </body> </html> |
● style.css
1 2 3 4 5 6 7 8 9 | .on-area, .focus-area { display: flex; } .ret { width: 100px; height: 25px; border: 2px solid black; margin: 2px; } |
● main.js
1 2 3 4 5 6 7 8 9 10 11 12 | $(window).on('load', function() { $(document).on('focus',".on", focusEvent) $('.focus').focus(focusEvent) $('button').click(function() { $('.on-area').append("<input class= 'ret on'>") $('.focus-area').append("<input class= 'ret focus'>") }) function focusEvent() { $(this).css('background', 'pink') } }) |
実行結果
ページ読み込み完了後に作成された要素に対してはon()もfocus()も要素の色が変化しています。
しかし、ボタンを押して作成された要素に対して、on()側の要素は色が変化していますが、focus()側の要素は色が変化していません。
そのため、こちらも動的に作成した要素に対してon()だと処理が行われていますが、focus()では処理が行われていないということがわかります。
jQueryで要素にイベント処理の設定を行うメソッドの一覧
jQueryでイベント処理の設定を行うメソッドはon()以外にも存在します。
そのため、ここではjQueryで要素にイベント処理の設定を行うメソッドの一覧についてご紹介します。
bind()
bind()とは、要素にイベントを紐づけるメソッドになります。
そのため、bind()に「イベント名」を設定することでイベント処理の設定を行うことができます。
● main.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>on()で要素のイベント処理の設定を行う</title> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="main.js"></script> </head> <body> <h2>bind()で要素にイベントを紐づける</h2> <div class= "ret"></div> <button id="btn">クリック</button> </body> </html> |
● style.css
1 2 3 4 5 | .ret { width: 100px; height: 100px; border: 1px solid black; } |
● main.js
1 2 3 4 5 6 7 | $(window).on("load",function(){ $("#btn").bind("click", function(){ let color = ["tomato", "skyblue", "yellowgreen", "pink", "brown"] console.log(Math.random() * 4) $(".ret").css("background", color[Math.trunc((Math.random() * 5))]) }); }); |
実行結果
bind()でイベント発生時に処理を行っています。
そのため、要素をクリックすると要素の色が変化しています。
もし、bind()について詳しく知りたい場合は下記の記事をご参考ください。
one()
one()とは、要素に一度だけ実行できるイベント処理を設定することができるメソッドになります。
そのため、one()に「イベント名」を設定することで、イベント処理の設定を行うことができます。
● main.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>on()で要素のイベント処理の設定を行う</title> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="main.js"></script> </head> <body> <h2>bind()で要素にイベントを紐づける</h2> <div class= "ret"></div> <button id="btn">クリック</button> </body> </html> |
● style.css
1 2 3 4 5 | .ret { width: 100px; height: 100px; border: 1px solid black; } |
● main.js
1 2 3 4 5 6 7 | $(window).on("load",function(){ $("#btn").one("click", function(){ let color = ["tomato", "skyblue", "yellowgreen", "pink", "brown"] console.log(Math.random() * 4) $(".ret").css("background", color[Math.trunc((Math.random() * 5))]) }); }); |
実行結果
one()でイベント発生時に処理を行っています。
そのため、要素をクリックすると要素の色が一度だけ変化しています。
もし、one()について詳しく知りたい場合は下記の記事をご参考ください。
要素に設定したイベント処理を解除する場合
要素に設定したイベント処理を解除するにはoff()を使用します。
off()とは、オブジェクトに設定したイベント処理を削除することができるメソッドになります。
そのため、on()によって設定されたイベント処理を解除することができます。
● main.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>on()で要素のイベント処理の設定を行う</title> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="main.js"></script> </head> <body> <h2>off()でイベント処理を解除</h2> <div class= "ret"></div> <button id="btn1">クリック</button> <button id="btn2">解除</button> </body> </html> |
● style.css
1 2 3 4 5 | .ret { width: 100px; height: 100px; border: 1px solid black; } |
● main.js
1 2 3 4 5 6 7 8 | $(window).on("load",function(){ $("#btn1").on("click", function(){ $(".ret").css("background", "black") }); $("#btn2").on("click", function(){ $("#btn1").off() }); }); |
実行結果
off()で設定したイベント処理を解除しています。
そのため、「クリック」を押すと要素の色が変化しますが、「解除」を押してクリックを押すと何も起きなくなります。
JavaScriptでイベント処理の設定を行う場合
JavaScriptでイベント処理の設定を行う場合はaddEventListener()を使用します。
addEventListener()とは、イベントが発生した際に処理を実行するよう設定できるメソッドになります。
つまり、JavaScriptで準備されたon()とよく似たメソッドとなります。
● index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>on()で要素のイベント処理の設定を行う</title> <link rel="stylesheet" href="style.css"> <script src="main.js"></script> </head> <body> <h2>addEventListener()イベント発生時に処理を行う</h2> <p class= "ret"></p> <p class= "log"></p> </body> </html> |
● style.css
1 2 3 4 5 6 7 8 9 | .log { font-weight: bold; font-size: 20px; } .ret { width: 100px; height: 100px; border: 2px solid black; } |
● main.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | window.addEventListener('load', function() { let cnt = 0 let ret = document.querySelector('.ret') ret.addEventListener('mousemove', colorChange) function colorChange(e) { cnt = cnt + 1 let log = document.querySelector('.log') let rndR = Math.floor(Math.random() * 256); let rndB = Math.floor(Math.random() * 256); let rndG = Math.floor(Math.random() * 256); let rnd_color = "rgb(" + rndR + ", " + rndB + ", " + rndG + ")"; ret.style.backgroundColor = rnd_color; log.textContent = e.type + 'イベントが発動しました。発動回数:' + cnt } }) |
実行結果
addEventListener()でイベント発生時に処理を行っています。
そのため、マウスが要素内で移動すると要素の色がランダムで変化しています。
もし、addEventListener()について詳しく知りたい場合は下記の記事をご参考ください。
まとめ
⚫︎ on()とはセレクタにイベント後の処理を紐づけるメソッドである。
⚫︎ on()は下記の引数を指定して使用する
・イベント(必須)
・セレクタ(任意)
・オブジェクトデータ(任意)
・イベントハンドラ(必須)
⚫︎ イベントを複数設定してイベント処理の設定を行うにはon()のイベントに半角空白を空けてイベント名を指定する。
⚫︎ on()のイベントハンドラに引数を指定するとイベント情報のデータをオブジェクトで引き渡される。
⚫︎ on()でセレクタのフィルタリングを行ってイベント処理の設定を行うには引数にセレクタを指定する。
⚫︎ on()でデータの受け渡しを行ってイベント処理の設定を行うには引数にオブジェクトデータを指定する。
⚫︎ on()と他のイベントメソッドとの違いは動的に作成された要素に対してイベント処理が対象であるかどうかである。
⚫︎ jQueryで要素のイベント処理の設定を行うメソッドはon()以外にも下記のメソッドがある。
・bind()
・one()
⚫︎ 設定したイベント処理を解除するにはoff()を使用する。
⚫︎ JavaScriptで要素のクリック時に処理を行うにはaddEventListener()を使用する。
