目次
JavaScriptでのaddEventListenerの使い方とは？
今回は、JavaScriptでのaddEventListenerの使い方について説明します。addEventListenerを使えば、イベントに合わせた処理を実行できます。ここでは、click/mousemove/keydown/keyup/input/changeイベントのaddEventListenerを紹介します。
JavaScriptでのaddEventListenerの使い方に興味のある方はぜひご覧ください。
clickイベント
addEventListenerのclickイベントの使い方について紹介します。HTMLは以下のように記述します。
|
1
2
3
4
5
|
<button id="inc_btn">インクリメント</button>
<button id="dec_btn">デクリメント</button>
<button id="rst_btn">リセット</button>
<div id="counter">0</div>
|
JavaScriptは以下のように記述します。
|
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
|
// 要素を取得
const inc_btn = document.getElementById("inc_btn");
const dec_btn = document.getElementById("dec_btn");
const rst_btn = document.getElementById("rst_btn");
const counter = document.getElementById("counter");
//addEventListenerで登録
inc_btn.addEventListener("click", incFunc);
dec_btn.addEventListener("click", decFunc);
rst_btn.addEventListener("click", rstFunc);
// インクリメント
function incFunc(event){
let num = parseInt(counter.textContent, 10);
counter.textContent = num + 1;
}
// デクリメント
function decFunc(event){
let num = parseInt(counter.textContent, 10);
counter.textContent = num - 1;
}
// リセット
function rstFunc(event){
counter.textContent = 0;
}
|
実行結果は以下のようになります。
See the Pen
addEventListener1 by kskumd (@kskumd)
on CodePen.
mousemoveイベント
addEventListenerのmousemoveイベントの使い方について紹介します。HTMLは以下のように記述します。
|
1
2
|
<p>枠内でマウスを動かしてください。</p>
<canvas id="target" width="400" height="300"></canvas>
|
CSSは以下のように記述します。
|
1
2
3
|
#target{
border:1px solid #000000;
}
|
JavaScriptは以下のように記述します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
// 要素の取得
let mycanvas = document.getElementById('target');
// コンテキストの取得
let context = mycanvas.getContext('2d');
// mousemoveイベントの設定
mycanvas.addEventListener('mousemove', mouseMove);
// mousemove時のイベント
function mouseMove(event){
context.beginPath();
// 丸を描く
context.arc(event.offsetX, event.offsetY, 3, 0, 2 * Math.PI);
context.stroke();
}
|
実行結果は以下のようになります。
See the Pen
addEventListener2 by kskumd (@kskumd)
on CodePen.
keydown/keyupイベント
addEventListenerのkeydown/keyupイベントの使い方について紹介します。HTMLは以下のように記述します。
|
1
|
<div id="target">何かキーを押してください。</div>
|
JavaScriptは以下のように記述します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
// 要素の取得
const target_div = document.getElementById("target");
// keydown,keyupイベントを登録
window.addEventListener("keydown", handleKeydown);
window.addEventListener("keyup", handleKeyup);
// keydown時の関数
function handleKeydown(event){
var message = "input keycode:" + event.keyCode;
target_div.textContent = message;
console.log(message);
}
// keyupddfd時の関数
function handleKeyup(event){
console.log("key up");
}
|
実行結果は以下のようになります。
See the Pen
addEventListener3 by kskumd (@kskumd)
on CodePen.
input/changeイベント
addEventListenerのinput/changeイベントの使い方について紹介します。HTMLは以下のように記述します。
|
1
2
3
|
<input placeholder="Enter some text" name="name"/>
<p id="output1"></p>
<p id="output2"></p>
|
JavaScriptは以下のように記述します。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
// 要素の取得
const input = document.querySelector('input');
const output1 = document.getElementById('output1');
const output2 = document.getElementById('output2');
// addEventListenerで登録
input.addEventListener('input', handleInput);
input.addEventListener('change', handleChange);
// inputイベント
function handleInput(event) {
output1.textContent = event.target.value;
}
// changeイベント
function handleChange(event) {
output2.textContent = event.target.value;
}
|
実行結果は以下のようになります。inputイベントはリアルタイムにイベントが発生しますが、changeイベントはフォーカスを外した時にイベントが発生します。
See the Pen
addEventListener4 by kskumd (@kskumd)
on CodePen.
まとめ
いかがでしたでしょうか。JavaScriptでのaddEventListenerの使い方について説明しました。addEventListenerを使えば、イベントに合わせた処理を実行できます。ここでは、click/mousemove/keydown/keyup/input/changeイベントのaddEventListenerを紹介しました。
ぜひご自身でソースコードを書いて、理解を深めてください。
インフラエンジニア専門の転職サイト「FEnetインフラ」
FEnetインフラはサービス開始から10年以上『エンジニアの生涯価値の向上』をミッションに掲げ、多くのエンジニアの就業を支援してきました。
転職をお考えの方は気軽にご登録・ご相談ください。
