テーマ
こんにちは！！naoto555です。今回は、JavaScriptでよく使われるddEventListener()を使ったイベント処理について解説します。イベント処理はWeb開発において欠かせない要素の1つで、loadやclickなどの基本的なイベントから、mousemoveやkeyupといった複雑なイベント処理まで、幅広く利用されています。本記事では、各イベントの特徴や使い方、そして実際にコーディングして動作確認するまで、イベント処理について詳しく解説していきます。(2024.4記載)
addEventListenerとは？
「addEventListener()」は、JavaScriptで要素に対してイベント処理を追加するためのメソッドです。具体的には、ページがロードされたときや、ボタンがクリックされたとき、キーが押されたときなど、要素に対する様々なイベントに応答する処理を設定することができます。addEventListener()を利用することで、動的なWebページを作成することができます。
addEventListener()を使ったイベントリスナーの基本的な構文
①基本文章の書き方
addEventListener(イベント, 関数オブジェクト, false);addEventLisetenrをJavaScript上で上記のような書き方をします。それぞれの引数には以下のような意味が含まれます。
第1引数(イベント)
監視するイベントの種類を指定します。例えば、’click’を指定すると、クリックイベントを監視することができます。
第2引数(関数オブジェクト)
イベントが発生した場合に実行される関数名または関数オブジェクト名を書きます。また、イベントが発生したときに実行される関数のことをイベントハンドラと呼ぶこともあります。
第3引数
キャプチャフラグです。これは、イベントリスナーがイベントをキャプチャするかどうかを制御します。falseを指定すると、イベントリスナーがイベントバブリング（子から親へのイベント伝播）に対してのみ応答することを意味します。つまり、イベントは要素内で発生した場合にはその要素内で処理され、親要素には伝播されません。trueを指定すると、イベントリスナーがイベントキャプチャリング（親から子へのイベント伝播）に対してのみ応答することを意味します。つまり、イベントは親要素からキャプチャされ、子要素に伝播してから要素内で処理されます。大抵の場合はfalseが一般的であまりtrueで指定する機会は少ないかと思います。また、第3引数は省略も可能で指定しない場合は、falseが採用されます。
②基本文章の書き方(例文①)
//例文①-1
var button = document.getElementById('button');
button.addEventListener('click', test, false);
function test(){
//ここに処理を記述
}上記の例文では、ID=’button’という要素を取得し、取得したbutton要素がクリックされたらtest()という処理を実行します。
コードの抜粋だけでは、イメージしにくいかと思いますので、上記の例文にHTML含めた全文にして、動きも見ていきたいと思います。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>addEventListener例文</title>
<style>
.square {
width: 500px;
height: 500px;
background-color: gray;
}
</style>
</head>
<body style="width:50%; margin: 20px auto;">
<div class="square"></div>
<br />
<button id="button">ボタン</button>
<script type="text/javascript">
var button = document.getElementById('button');
button.addEventListener('click', test, false);
function test(){
var squares = document.getElementsByClassName('square');
squares[0].style.backgroundColor = 'red';
}
</script>
</body>
</html>動作画像
button.addEventListener(‘click’, test(), false)にて、ボタン要素のクリックイベントを監視するようにセットします。ボタンにクリックイベントが発生する(つまりボタンがクリックされる)と、第2引数のtestにて、関数オブジェクト(function test())が呼び出されます。
function test()では、クラス要素”square”を取得してクラス要素の背景色を赤に変える処理を行っています。
③基本文章の書き方(例文②)
さきほどの例文では、ボタンがクリックされたら第2引数の関数オブジェクトtest()を呼び出すという書き方でしたが、第2引数の関数オブジェクトを無名関数にして記述する方法もありますので、その方法もご紹介します。test()の記載を無くし、以下のように無名関数に変えても例文①と同様の動作をします。
//例文②-1
var button = document.getElementById('button');
button.addEventListener('click', function(){
//ここに処理を記述
}, false);
//例文②-2
var button = document.getElementById('button');
button.addEventListener('click', ()=>{
//ここに処理を記述
}, false);また、第3引数のfalseは省略可能で省略したときは、ディフォルト値として’false’設定されるのと，滅多にtrueで使われることはないという理由から、以下の書き方の方がより実用的な記述となります。
//例文①-1改
var button = document.getElementById('button');
button.addEventListener('click', test);
function test(){
//ここに処理を記述
}
//例文②-1改
var button = document.getElementById('button');
button.addEventListener('click', function(){
//ここに処理を記述
});
//例文②-2改
var button = document.getElementById('button');
button.addEventListener('click', ()=>{
//ここに処理を記述
});よく使われるイベントの例
以下によく使用されるイベントの一例を一覧表にしました。addEventListenerには，下記の表のイベント以外にも非常に多くのイベントが用意されています。イベント全てを覚えるのは大変かと思うので、こんなのあったなと頭の片隅で覚えておいて、具体的にやりたいことが明確になったら、その都度調べるというのが現実的かなと思います。
| イベント | 内容 |
| click | 要素がクリックされたときに発火 |
| submit | フォームが送信されたときに発火 |
| keydown | キーボードのキーが押されたときに発火 |
| keyup | キーボードのキーが離されたときに発火 |
| load | Webページの読み込みが完了した時に発火 |
| scroll | スクロールされたときに発火 |
| mouseover | マウスポインターが要素に乗ったときに発火 |
| mouseout | マウスポインターが要素から離れたときに発火 |
| focus | 要素がフォーカスされたときに発火 |
| blur | 要素からフォーカスが外れたときに発火 |
| contextmenu | コンテキストメニューが表示されたときに発火 |
| touchstart | タッチイベントが開始されたときに発火 |
| touchmove | タッチイベント中に指が動いたときに発火 |
| touchend | タッチイベントが終了したときに発火 |
| change | 要素の内容が変更されたときに発火 |
| input | 要素に入力された値が変更されたときに発火 |
| dragstart | 要素がドラッグ開始されたときに発火 |
| dragover | 要素にドラッグ中の要素が乗ったときに発火 |
| drop | 要素にドラッグ中の要素がドロップされたときに発火 |
| resize | ブラウザのウィンドウサイズが変更されたときに発火 |
以下に何個か上記のイベント使用した簡単なコードの作成例をご紹介いたします。
作成例①
mouseover, mouseoutイベント使って、要素の上にマウスが乗るとピンク，離れるとグレー(もとに戻るコード)
動作画像
作成コード(htmlタグ,headタグは省略)
<body>
<div id="box" style="width:100px; height: 100px; background-color: lightgray;">
</div>
<script type="text/javascript">
var box = document.getElementById("box");
// mouseoverイベント
box.addEventListener("mouseover", function(){
box.style.backgroundColor = "pink";
});
// mouseoutイベント
box.addEventListener("mouseout", function(){
box.style.backgroundColor = "lightgray";
});
</script>
</body>
作成例②
scrollイベント使って、ボディのＹ方向のスクロール値が500px未満のときは、背景色を薄い橙(#F1CDB9)。スクロール値の値が500px未満の時は、薄い緑(#C9E4CA)に変更しています。
スタイルの“transition: background-color 0.5s ease;”の部分は、いきなり色が切り替わるのではなく、0.5秒かけて滑らかに色が切り替わるようにアニメーションを入れています。
動作画像
作成コード(htmlタグ,headタグは省略)
<body>
<style>
body {
height: 2000px;
background-color: #F1CDB9;
transition: background-color 0.5s ease;
}
</style>
<script>
window.addEventListener('scroll', function() {
if (window.scrollY > 500) {
document.body.style.backgroundColor = "#C9E4CA";
} else {
document.body.style.backgroundColor = "#F1CDB9";
}
});
</script>
</body>作成例③
keydownイベント使って、キーボードの十字キーが押された際に、光る矢印を表示するコードです。DIVのクラス名に”active”というクラスを追加してキーボードの十字キーが押されているときは背景色を黄色にしています。また、keyupイベントを使用して、キーボードの十字キーが離されたときには追加した”active”というクラス名を削除して、背景色を元に戻しています。
作成コードのfunction(e)、e.keyの部分が少し分かりにくいので解説加えます。
addEventListener()メソッドで指定したイベントが発生すると、JavaScriptは指定した関数を呼び出し、その際に発生したイベントに関する情報を引数として渡すことができます。通常、引数にはeとかeventという名前がよく使われますが、実際には自分で好きな名前をつけることができます。function(e)のeは、イベント(この場合はキーダウンイベント)を引数として関数に渡しています。
引数として渡されるオブジェクトは、イベントに応じた情報が格納されています。キーダウンイベントの場合、どのキーが押されたかを表すプロパティとして’key’があります。したがって、e.keyは、引数で渡されたイベントオブジェクトの’key’プロパティ⇒つまり、どのキーが押されたかを参照するという意味になります。
動作画像
作成コード(htmlタグ,headタグは省略)
<body>
<style>
#arrow-keys {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100px;
margin-top: 100px;
background-color: #f1f1f1;
z-index: 999;
}
.up-key, .left-key, .down-key, .right-key {
width: 30px;
height: 30px;
margin: 0 10px;
border: solid 2px black;
border-radius: 50%;
text-align: center;
line-height: 30px;
transition: background-color 0.2s ease;
}
.up-key.active, .left-key.active, .down-key.active, .right-key.active {
background-color: #ffcc33;
}
</style>
<div id="arrow-keys">
<div class="up-key">↑</div>
<div class="left-key">←</div>
<div class="down-key">↓</div>
<div class="right-key">→</div>
</div>
<script type="text/javascript">
const upKey = document.querySelector('.up-key');
const leftKey = document.querySelector('.left-key');
const downKey = document.querySelector('.down-key');
const rightKey = document.querySelector('.right-key');
document.addEventListener('keydown', function(e) {
switch (e.key) {
case 'ArrowUp':
upKey.classList.add('active');
break;
case 'ArrowLeft':
leftKey.classList.add('active');
break;
case 'ArrowDown':
downKey.classList.add('active');
break;
case 'ArrowRight':
rightKey.classList.add('active');
break;
}
});
document.addEventListener('keyup', function(e) {
switch (e.key) {
case 'ArrowUp':
upKey.classList.remove('active');
break;
case 'ArrowLeft':
leftKey.classList.remove('active');
break;
case 'ArrowDown':
downKey.classList.remove('active');
break;
case 'ArrowRight':
rightKey.classList.remove('active');
break;
}
});
</script>
</body>
まとめ
JavaScriptのプログラミングは、イベントハンドラ(イベント発生時の処理)を記述することと言っても過言でないぐらいよく使われます。
それだけにイベントに関しての理解を深めることは、とても重要なことだと考えます。