Sossyの助太刀ブログ 
・IT/Web系エンジニアの経験者の方
・どこの転職エージェントを利用しようか迷っている方
それなら、キッカケエージェントにご相談！
キッカケエージェントでは、少数精鋭のエージェントが、エンジニアの経験やスキル、志向性などをカウンセリングし、的確なアドバイスを提供します！
また、徹底した企業へのヒアリングにより、最適なマッチングを実現し、今では内定率が一般的なエージェントの2倍以上となっています！
転職エージェントに迷っている方、まずは無料でキャリア相談から！
(この記事は2023年08月15日に投稿されました。)
JavaScriptイベント発生時に処理を行うにはaddEventListener()を使用します。
addEventListener()とは、イベントが発生した際に処理を実行するメソッドになります
そのため、クリックやスクロールなどの何かしらのアクションが行われた際にどのような処理を行うのかを設定することができます。
また、引数を追加することで一度きりのイベントにするのかバブリングイベントにするのかなどの細かなオプション設定することができます、
JavaScriptではイベントが始まらないと処理が始まらないため、addEventListener()についてまだ理解していない方はこの記事を読んで覚えておきましょう。
今回は、JavaScript()のaddEventListener()でイベント発生時に処理を行う方法について紹介していきます。
要素にどのイベントを付与するか悩んでいる場合
addEventListener()のイベントハンドラについて知りたい場合
addEventListener()とは
addEventListener()とはイベントが発生した際に処理を実行するよう設定できるメソッドとなります。
「マウスでボタンをクリックした時」や「マウスをスクロールした時」など何かしらのアクションが起きた際にどのような処理をするのか設定することができます。
addEvetListener()の書き方
addEvetListener()の書き方は下記のようになります。
1 | セレクタ.addEventListener(イベント, イベントハンドラ [, オプション]) |
セレクタの後にaddEventListener()と追記し、括弧の中に必須の引数を2つ指定することで使用することができます。
また、任意の引数を1つ設定することができ、合計で3つの引数を指定して使用することもできます。
addEvetListener()の引数
addEvetListener()の引数は下記のようになります。
- イベント(必須):
イベント名を文字列で指定する - イベントハンドラ(必須):
イベントが発生したときのイベントを関数で指定する - オプション(任意):
イベントのオプションをオブジェクトで指定する
また、イベントハンドラで指定する関数は下記の3パターンがあります。
● 外部関数
1 2 3 4 5 | 対象の要素.addEventListener(イベント, sample); function sample() { // 処理を記述 } |
● 無名関数
1 2 3 | 対象の要素.addEventListener(イベント, function() { // 処理を記述 }); |
● アロー関数
1 2 3 | 対象の要素.addEventListener(イベント, () => { // 処理を記述 }); |
関数名を指定する「外部関数」、処理内容を直接指定する「無名関数、記述を省略できる「アロー関数」で指定することができます。
僕は複数の処理が存在する場合は「外部関数」、単一の処理である場合は「無名関数」、「アロー関数」のように使用する目的で使い分けています。
addEventListener()でイベント発生時に処理を行うサンプルコード
addEventListener()でイベント発生時に処理を行うサンプルコードをご紹介します。
ここでは下記の6つのパターンでaddEventListener()を使用します。
- ロードした後に処理を行う場合
- クリックした後に処理を行う場合
- マウスを移動させている最中に処理を行う場合
- フォームを送信した後に処理を行う場合
- フォーカスを当てた後に処理を行う場合
- スワイプしている最中に処理を行う場合
もし、addEventListener()のイベント一覧について詳しく知りたい場合は下記の記事絵をご参考ください。
ロードした後に処理を行う場合
ロードした後に処理を行う場合はイベントにloadを指定します。
loadとは、全ソースの読み込みが完了した時に発生するイベントとなります。
● index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>addEventListener()イベント発生時に処理を行う</title> <link rel="stylesheet" href="style.css"> <script src="main.js"></script> </head> <body> <h2>addEventListener()でloadイベント発生</h2> <p class= "obj"></p> </body> </html> |
● style.css
1 2 3 4 | .obj { font-weight: bold; font-size: 20px; } |
● main.js
1 2 3 4 | window.addEventListener('load', function() { let object = document.querySelector('.obj') object.textContent = "loadイベントが発動しました。" }) |
実行結果
addEventListener()によってロードした後に処理を行っています。
そのため、Webページをロードすると「loadイベントが発動しました。」の文字列が表示されています。
クリックした後に処理を行う場合
クリックした後に処理を行う場合はイベントにclickを指定します。
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>addEventListener()イベント発生時に処理を行う</title> <link rel="stylesheet" href="style.css"> <script src="main.js"></script> </head> <body> <h2>addEventListener()でclickイベントを設定</h2> <p class= "obj"></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; } .obj { width: 100px; height: 100px; background: red; } |
● 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 obj = document.querySelector('.obj') obj.addEventListener('click', colorChange) function colorChange(event) { 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 + ")"; obj.style.backgroundColor = rnd_color; log.textContent = 'clickイベントが発動しました。発動回数:' + cnt } }) |
実行結果
addEventListener()によってクリックした後に処理を行っています。
そのため、ボタンをクリックすると、背景色がランダムに変化しています。
マウスを移動させている最中に処理を行う場合
マウスを移動させている最中に処理を行うには、イベントにmousemoveを指定します。
mousemoveとは、オブジェクト内にマウスが移動する時に発生するイベントになります。
そのため、マウスを動かしたタイミングで処理を行う場合はこちらのイベントを使用します。
● 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>addEventListener()イベント発生時に処理を行う</title> <link rel="stylesheet" href="style.css"> <script src="main.js"></script> </head> <body> <h2>addEventListener()でmousemoveイベントを設定</h2> <div class ="obj"></div> <p class= "log"></p> </body> </html> |
● style.css
1 2 3 4 5 6 7 8 9 | .log { font-weight: bold; font-size: 20px; } .obj { width: 50px; height: 50px; background: red; } |
● main.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | window.addEventListener('load', function() { let cnt = 0 let obj = document.querySelector('.obj') document.addEventListener('mousemove', objMove) function objMove(event) { cnt = cnt + 1 let log = document.querySelector('.log') obj.style.position = "absolute" obj.style.left = event.clientX + "px" obj.style.top = event.clientY + "px" log.textContent = 'mousemoveイベントが発動しました。' + cnt } }) |
実行結果
addEventListener()によってマウスを移動させている最中に処理を行っています。
そのため、マウスを移動させた場所にオブジェクトが移動されます。
フォームを送信した後に処理を行う場合
フォームを送信した後に処理を行うにはイベントにsubmitを指定します。
submitとはフォームを送信した後に発生するイベントになります。
そのため、フォームで送信した後に処理を行いたい場合に使用することができます。
● index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>addEventListener()イベント発生時に処理を行う</title> <link rel="stylesheet" href="style.css"> <script src="main.js"></script> </head> <body> <h2>addEventListener()でsubmitイベントを設定</h2> <form method="POST" action="#"> <p>値：<input type="text" name="Val"></p> <p><input type="submit" value="送信する"></p> </form> <p class= "result"></p> <p class= "log"></p> </body> </html> |
● style.css
1 2 3 4 | .log { font-weight: bold; font-size: 20px; } |
● main.js
1 2 3 4 5 6 7 8 9 10 11 12 13 | window.addEventListener('load', function() { let cnt = 0 let obj = document.querySelector('.obj') document.addEventListener('submit', (event) => { let log = document.querySelector('.log') let ret = document.querySelector('.result') let val = document.getElementsByName("Val") let input = val[0].value ret.textContent = input + "を送信しました。" log.textContent = "submitイベントが発生しました。" event.preventDefault() }); }) |
実行結果
addEventListener()によってフォームを送信した後に処理を行っています。
そのため、送信ボタンを押すと、「testを送信しました。」の文字列が表示されています。
フォーカスを当てた時に処理を行う場合
フォーカスを当てた時に処理を行う場合はfocusを指定します。
focusとは入力フォームにフォーカスを当てた後に発生するイベントになります。
そのため、値を入力した後に処理行う場合はこちらのイベントを使用します。
● index.html
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>addEventListener()で設定できるイベントの一覧</title> <link rel="stylesheet" href="style.css"> <script src="main.js"></script> </head> <body> <h2>addEventListener()でfocusイベントを設定</h2> <p>値：<input type="text" name="Val1"></p> <p class = "ts"></p> <p class= "log"></p> </body> </html> |
● style.css
1 2 3 4 | .log { font-weight: bold; font-size: 20px; } |
● main.js
1 2 3 4 5 6 7 8 9 10 11 | window.addEventListener('load', function() { let input = document.querySelector('input') input.addEventListener('focus', objFocus) function objFocus() { let log = document.querySelector('.log') let ts = document.querySelector('.ts') log.textContent = 'focusイベントが発動しました。' ts.textContent = event.timeStamp } }) |
実行結果
addEventListener()によってフォーカスを当てた時に処理を行っています。
そのため、入力値にフォーカスを当てると「タイムスタンプ」が表示されています。
スワイプしている最中に処理を行う場合
スワイプしている最中に処理を行うにはイベントにtouchmoveを指定します。
touchmoveとはオブジェクトのタッチして移動させている最中に発生するイベントになります。
そのため、タッチ後のスワイプを行った後に処理行う場合はこちらのイベントを使用します。
● 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>addEventListener()イベント発生時に処理を行う</title> <link rel="stylesheet" href="style.css"> <script src="main.js"></script> </head> <body> <h2>addEventListener()でtouchmoveイベントを設定</h2> <p class= "obj">タッチ</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; } .obj { width: 50px; height: 50px; background: red; } |
● main.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | window.addEventListener('load', function() { let cnt = 0 let obj = document.querySelector('.obj') obj.addEventListener('touchmove', touch) function touch(event) { cnt = cnt + 1 let log = document.querySelector('.log') let clientX = event.targetTouches[0].clientX let clientY = event.targetTouches[0].clientY obj.style.position = "absolute" obj.style.left = clientX + 'px' obj.style.top = clientY + 'px' event.preventDefault() log.textContent = 'touchmoveイベントが発動しました。発動回数:' + cnt } }) |
実行結果
addEventListener()によってスワイプしている最中に処理を行っています。
そのため、オブジェクトをタッチしてスワイプするとオブジェクトも動きます。
イベントハンドラに引数を指定してaddEventListener()でイベント発生時に処理を行う場合
イベントハンドラに引数を指定してaddEventListener()でイベント発生時に処理を行うには、引数を下記のオブジェクトで指定します。
- ハンドラに渡したい引数::
オリジナルのキーを指定し、「this.キー名」を使用して呼び出す - 関数:
handleEventというキーを指定する
● 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>addEventListener()イベント発生時に処理を行う</title> <link rel="stylesheet" href="style.css"> <script src="main.js"></script> </head> <body> <h2>addEventListener()でイベントハンドラに引数を指定してイベントを設定</h2> <div class ="obj"></div> <p class= "log"></p> </body> </html> |
● style.css
1 2 3 4 5 6 7 8 9 | .obj { width: 50px; height: 50px; background: blue; } .log { font-weight: bold; font-size: 20px; } |
● main.js
1 2 3 4 5 6 7 8 9 10 11 12 | window.addEventListener('load', function() { let cnt = 0 let object = document.querySelector('.obj') let val = "変数の値" object.addEventListener('click', {name: val, handleEvent: objClick}) function objClick(event) { let log = document.querySelector('.log') this.name = this.name + 'を渡すよ。' log.textContent = 'clickイベントが発動しました。受け取る変数値:' + this.name } }) |
実行結果
addEventListener()によってイベントハンドラに引数を指定してイベント発生時に処理を行っています。
そのため、オブジェクトをクリックすると変数の値が表示されます。
オプションを指定してaddEventListener()でイベント発生時に処理を行う場合
addEventListener()でオプションを指定してイベント発生時に処理を行うには、オブションをオブジェクトで指定します。
設定したいオブションをキーで指定し、設定する場合はtrue、設定しない場合はfalseを指定します。
そして、設定できるオプションは下記の3つになります。
- once
- passive
- capture
イベントを1回きりにする場合
イベントを1回きりにする場合はonceのキーにtrueを設定します。
こちらを設定することで、一度イベントの処理が行われますが、2度目からはイベントが発生しても処理が行われなくなります。
● index.html
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>addEventListener()にオプションを指定してイベント発生時に処理を行う</title> <link rel="stylesheet" href="style.css"> <script src="main.js"></script> </head> <body> <h2>addEventListener()のオプションにonceを設定</h2> <button type="button" class= "btn">クリック</button> <div class ="obj"></div> <p class= "log"></p> </body> </html> |
● style.css
1 2 3 4 | .log { font-weight: bold; font-size: 20px; } |
● main.js
1 2 3 4 5 6 7 8 9 10 11 12 | window.addEventListener('load', function() { let cnt = 0 let obj = document.querySelector('.obj') let btn = document.querySelector('.btn') btn.addEventListener('click', btnClick, {once: true}); function btnClick(event) { cnt = cnt + 1 let log = document.querySelector('.log') log.textContent = 'clickイベントが発動しました。発動回数: ' + cnt } }) |
実行結果
addEventListener()のオプションにonceを指定してイベント発生時に処理を行っています。
そのため、ボタンをクリックするとログに回数がカウントされますが、2回目をクリックするとログの回数がカウントされません。
スクロールジャンクが発生しないよう設定する場合
スクロールジャンクが発生しないよう設定する場合はpassiveのキーにtrueを設定します。
スクロールジャンクとはスクロールする際に、スクロールを停止する処理と重なってしまい、スクロールがガタついてしまうような状態のことをいいます。
そのため、こちらを設定することで、スクロールジャンクが発生しなくなるため、パフォーマンスが劇的に向上します。
● 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>addEventListener()イベント発生時に処理を行う</title> <link rel="stylesheet" href="style.css"> <script src="main.js"></script> </head> <body> <h2>addEventListener()のオプションにpassiveを設定</h2> <p class= "obj">タッチ</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; } .obj { width: 50px; height: 50px; background: green; } |
● main.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | window.addEventListener('load', function() { let cnt = 0 let obj = document.querySelector('.obj') obj.addEventListener('touchmove', move, {passive: true}) function move(event) { cnt = cnt + 1 let log = document.querySelector('.log') let clientX = event.targetTouches[0].clientX let clientY = event.targetTouches[0].clientY obj.style.position = "absolute" obj.style.left = clientX + 'px' obj.style.top = clientY + 'px' log.textContent = 'touchmoveイベントが発動しました。発動回数:' + cnt } }) </script> |
実行結果
addEventListener()のオプションにpassiveを指定してイベント発生時に処理を行っています。
そのため、オブジェクトをタッチしてスワイプすると、画面全体も自動でスクロールされています。
イベントをキャプチャリングとして設定する場合
イベントをキャプチャリングとして設定する場合はcaptureのキーにtrueを設定します。
キャプチャリングとはバブリングの逆であり、発生した要素に向かってイベントが走ることを言います。
こちらを設定することで、バブリングとは逆に伝染して処理が行われるようになります。
● index.html
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>addEventListener()にオプションを指定してイベント発生時に処理を行う</title> <link rel="stylesheet" href="style.css"> <script src="main.js"></script> </head> <body> <h2>addEventListener()のオプションにcaptureを設定</h2> <div class="obj-outer">obj-outerクラス <div class= "obj">objクラス</div> </div> <p class= "log"></p> </body> </html> |
● style.css
1 2 3 4 5 6 7 8 | div { background: pink; border:3px solid black; text-align:center; width:50%; margin:auto; padding:20px; } |
● main.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | window.addEventListener('load', function() { let outer = document.querySelector('.obj-outer') let obj = document.querySelector('.obj') let body = document.querySelector('body') let log = document.querySelector('.log') outer.addEventListener('click', function(){ log.textContent = log.textContent + '\n' + 'obj-outerでイベント発動' }, {capture: true}); obj.addEventListener('click', function(){ log.textContent = log.textContent + '\n' + 'objでイベント発動' }, {capture: true}); body.addEventListener('click', function(){ log.textContent = log.textContent + '\n' + 'bodyでイベント発動' }, {capture: true}) }) |
実行結果
addEventListener()のオプションにcaptureを指定してイベント発生時に処理を行っています。
そのため、オブジェクトクリックすると、DOMツリーの上から順にイベント処理が発動されています。
addEventListener()を使用した実際のケース
addEventListener()を使用した実際のケースについてご紹介します。
例えば、addEventListener()を使用してスマホ版のメニューを表示するコードを作成します。
● 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>addEventListener()イベント発生時に処理を行う</title> <link rel="stylesheet" href="style.css"> <script src="main.js"></script> </head> <body> <h2>addEventListener()でスマホ版のメニューを作成</h2> <button type="button" class="btn">クリック</button> <div class="hum-menu init"> <ul class="menu"> <li>TOPページ</li> <li>About</li> <li>料金</li> <li>お問い合わせ</li> <button type="button" class="cancelBtn">×</button> </ul> </div> </body> </html> |
● style.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | .hum-menu { background-color: aqua; opacity: 80%; position: absolute; top: 0; left: 0; width: 100%; height: 100vh; text-align: center; } .init { display: none; } .menu { padding-left:0; height: 100%; } li { list-style:none; height: 20%; font-size: 40px; } .active { animation: slide 1s forwards; display: block; } @keyframes slide{ from { transform: translateY(-900px); } to { transform: translateY(0); } } .no-active { animation: slideout 1s forwards; } @keyframes slideout{ from { transform: translateY(0px); } to { transform: translateY(-900px); } } |
● main.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | window.addEventListener('load', function() { let btn = document.querySelector('.btn') let humMenu = document.querySelector('.hum-menu') btn.addEventListener('click', function() { humMenu.classList.remove('init') humMenu.classList.remove('no-active') humMenu.classList.add('active') }) let cancel = document.querySelector('.cancelBtn') cancel.addEventListener('click', function() { humMenu.classList.remove('active') humMenu.classList.add('no-active') }) }) |
実行結果
addEventListener()によってスマホ版のメニューを作成しています。
そのため、ボタンを押すと縦型のメニューが表示され、×ボタンを押すとメニューが非表示になります。
addEventListener()でイベント処理を順番に変更する方法
addEventListener()で設定したイベントを順番に変更するには、switch-case文を使用してイベントのタイプを条件に分岐させます。
● 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>addEventListener()で設定できるイベントの一覧</title> <link rel="stylesheet" href="style.css"> <script src="main.js"></script> </head> <body> <h2>addEventListener()でイベントを順番に操作する</h2> <p class= "event"></p> <div class= "obj"></div> </body> </html> |
● style.css
1 2 3 4 5 6 7 8 9 10 | .obj { width: 500px; height: 750px; margin-top: 20px; border: 2px solid black; } .event { font-size: 20px; font-weight: bold; } |
● main.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | window.addEventListener('load', function() { let event = "click" let bgcolor = "red" let name = document.querySelector('.event') let obj = document.querySelector('.obj') name.textContent = '次のイベント: ' + event obj.addEventListener(event, {color: bgcolor, handleEvent: colorChange}, {once:true}) function colorChange(e) { obj.style.background = this.color eventChange(e.type) } function eventChange(event){ switch(event) { case 'click': event = 'mouseleave' bgcolor = 'blue' name.textContent = '次のイベント: ' + event eventListener(obj, event, bgcolor) obj.removeEventListener('click', colorChange) break; case 'mouseleave': event = 'scroll' bgcolor = 'green' name.textContent = '次のイベント: ' + event eventListener(window, event, bgcolor) obj.removeEventListener('mouseleave', colorChange) break; case 'scroll': event = 'click' bgcolor = 'red' name.textContent = '次のイベント: ' + event eventListener(obj, event, bgcolor) window.removeEventListener('scroll', colorChange) break; default: } } function eventListener(selector, event, bgcolor) { selector.addEventListener(event, {color: bgcolor, handleEvent: colorChange}, {once:true}) } }) |
実行結果
addEventListener()でイベント処理を順番に変更しています。
そのため、「clickイベント → mouseleaveイベント → srcollイベント」の順番で処理が実行することで、オブジェクトの背景色が変化しています。
jQueryでイベント発生時に処理を行う場合
jQueryでイベント発生時に処理を行うにはon()を使用します。
on()とは、オブジェクトにイベント処理を紐づけることができるメソッドになります。
そのため、addEventListener()と同じように使用することができます。
● index.html
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.7.0/jquery.min.js"></script> <script src="main.js"></script> </head> <body> <h2>on()でイベント発生時に処理を行う</h2> <button type="button" class= "btn">クリック</button> <p class= "log"></p> </body> </html> |
● style.css
1 2 3 4 | .log { font-weight: bold; font-size: 20px; } |
● main.js
1 2 3 4 5 | $(window).on("load",function(){ $(".btn").on("click", function(e) { $(".log").text(e.type + 'イベントが発生しました。') }) }); |
実行結果
on()によってイベント発生時に処理を行っています。
そのため、ボタンを押すと、「クリックイベントが発生しました。」という文字列が表示されます。
もし、on()について詳しく知りたい場合は下記の記事をご参考ください。
設定したイベントを解除する場合
設定したイベントを解除するにはremoveEventListener()を使用します。
removeEventListener()とは、設定されたイベント処理を削除するメソッドになります。
そのため、addEventListener()で設定したオブジェクトのイベント処理を解除することができます。
● index.html
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>removeEventListener()でイベントを解除する</title> <link rel="stylesheet" href="style.css"> <script src="main.js"></script> </head> <body> <h2>removeEventListener()でイベント解除</h2> <button type="button" class= "btn1">発動</button> <button type="button" class= "btn2">解除</button> <p class= "text"></p> <p class= "log"></p> </body> </html> |
● style.css
1 2 3 4 | .log { font-weight: bold; font-size: 20px; } |
● main.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | window.addEventListener('load', function() { let btn1 = document.querySelector('.btn1') let btn2 = document.querySelector('.btn2') let log = document.querySelector('.log') btn1.addEventListener('click', btnClick1); btn2.addEventListener('click', btnClick2); function btnClick1() { let val = 'クリック' let text = document.querySelector('.text') text.textContent = text.textContent + val log.textContent = 'clickイベントが発動しました。' } function btnClick2() { btn1.removeEventListener('click', btnClick1); log.textContent = 'clickイベントを解除しました。' } }) |
実行結果
removeEventListener()によって設定したイベントを解除しています。
そのため、発動ボタンを押すと、イベント処理が発生しますが、解除ボタンをクリックして発動ボタンをクリックすると、処理が行れません。
非同期のタイミングでイベント発生時に処理を行う場合
非同期のタイミングでイベント発生時に処理を行う場合はdispachEvent()を使用します。
dispachEvent()とは対象となるターゲットに指定したイベントを発生させるメソッドになります。
そのため、dispachEvent()を使用することで、非同期のタイミングでイベント発生時に処理を行うことができます。
● index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>dispatchEvent()で非同期のタイミングでイベント発生時に処理を行う</title> <link rel="stylesheet" href="style.css"> <script src="main.js"></script> </head> <body> <h2>dispachEvent()で非同期のイベント処理を行う</h2> <div> <button id="btn1">ボタン1</button> <button id="btn2">ボタン2</button> <button id="reset">リセット</button> </div> <p class= "log log1"></p> <p class= "log log2"></p> </body> </html> |
● style.css
1 2 3 4 | .log { font-weight: bold; font-size: 20px; } |
● main.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | window.addEventListener('load', function() { let btn1 = document.getElementById('btn1') let btn2 = document.getElementById('btn2') let reset = document.getElementById('reset') let log1 = document.querySelector('.log1') let log2 = document.querySelector('.log2') btn1.addEventListener('click', function(event) { log1.textContent = "btn1のclickイベントが発動しました。" let newevent = new Event('click'); btn2.dispatchEvent(newevent); }); btn2.addEventListener('click', function(event) { log2.textContent = "btn2のclickイベントが発動しました。" }) reset.addEventListener('click', init) function init() { log1.textContent = "" log2.textContent = "" } }) |
実行結果
dispachEvent()によって非同期のタイミングでイベント発生時に処理を行っています。
そのため、「ボタン1」を押すと、ボタン1だけでなく、「ボタン2」のclickイベントも発動し、それぞれのログが表示されています。
まとめ
⚫︎ addEventListener()とは、イベントが発生した際に処理を実行するよう設定できるメソッドである。
⚫︎ addEventListener()は下記の引数を指定して使用する。
・イベント(必須)
・イベントハンドラ(必須)
・オプション(任意)
⚫︎ addEventListener()でロードした後に処理を行うにはイベントにloadを指定する。
⚫︎ addEventListener()でクリックした後に処理を行うにはイベントにclickを指定する。
⚫︎ addEventListener()でマウスを動している最中に処理を行うにはイベントにmousemoveを指定する。
⚫︎ addEventListener()でフォームを送信した後に処理を行うにはイベントにsubmitを指定する。
⚫︎ addEventListener()でフォーカスした後に処理を行うにはイベントにfocusを指定する。
⚫︎ addEventListener()でスワイプしている最中に処理を行うにはイベントにtouchmoveを指定する。
⚫︎ addEventListener()のイベントハンドラに引数を指定してイベント発生時に処理を行うには、下記のフォーマットでオブジェクトを指定する。
・オリジナルキー:
イベントハンドラに渡したい引数
・handleEvent:
イベント処理の関数
⚫︎ addEventListener()でイベント処理を一度きりに設定するにはオプションのonesにtrueを指定する。
⚫︎ addEventListener()でスクロールジャンクが発生しないよう設定するにはオプションのpassiveにtrueを指定する。
⚫︎ addEventListener()でイベント処理をキャプチャリングするにはオプションのcaptureにtrueを指定する。
⚫︎ addEventListener()でイベント処理を順番に変更するにはswitch-case文を使用する
⚫︎ 設定したイベントを解除するにはremoveEventListener()を使用する。
⚫︎ 非同期のタイミングでイベント発生時に処理を行うにはdispachEvent()を使用する。
