In 'n' Out

ユーザー操作に反応するイベント

操作系イベントとは、ユーザーの操作に応じて発生するイベントのことです。
例えば、クリックやキー入力、タッチ操作など、ユーザーが画面に対して行った動作をきっかけに処理を実行できます。
これらのイベントを利用することで、ボタン操作や入力処理、画面の動きなど、ユーザーの操作に応じたさまざまな機能を実現できます。
操作系イベントの一覧は下記となります。

clickは既に前のページで解説済みなので、keydown・keyup・mouseenter・mouseleave・touchstart・touchmove・touchendの7つについて解説します。

keydown・keyup

keydownイベントはキーが押されたとき、keyupイベントはキーが離されたときに発生します。
この2つを組み合わせることで、キーの押下状態を判定したり、連続入力や長押しなどの処理を実装することができます。

コード例

<p id="keyCount">0</p>

//keyEvent.js
let count = 0;
let isPressing = false;
const text = document.getElementById('keyCount');

document.addEventListener('keydown', (e) => {
    if (e.key === "a") {
        isPressing = true;
    }
});

document.addEventListener('keyup', (e) => {
    if (e.key === "a") {
        isPressing = false;
    }
});

setInterval(() => {
    if (isPressing) {
        count++;
        text.textContent = count;
    }
}, 100);

動作例

実行ボタンを押すと挙動確認ができます。
キーボードのaキーを押し続けるとカウンターが増え続け、キーから離すとカウンターが止まります。
まず、カウンター用の変数と、キーが押されているかを管理する状態変数、そして表示を更新するためのテキスト要素を取得します。
次に、keydownイベントをaキーに対して設定し、キーが押されたときに状態変数をtrueにします。
keydownはキーを押している間も発火し続けますが、この例では状態の切り替えのみを行います。
続けて、keyupイベントをaキーに対して設定し、キーが離されたときに状態変数をfalseにします。
最後に、一定時間ごとに処理を実行し、状態変数がtrueのときにカウンターを増やし、その値をテキストに反映します。
今回は100ミリ秒ごとに処理を行うことで、1秒間に10カウント増えるようにしています。
これにより、キーが押され続けている間と、離されたときの挙動の違いを視覚的に確認できます。
keydownイベントの発火タイミングに依存せず、状態とタイマーで制御することで安定した動作になります。

mouseenter・mouseleave

mouseenterイベントはポインターが要素に入ったとき、mouseleaveイベントは要素からポインターが出たときに発生します。
この2つを組み合わせることで、ホバー状態の判定や表示の切り替え、アニメーションの制御などを行うことができます。

コード例

<img id="hoverImg" src="../img/animal-01.png" alt="ネズミ">

//mouseEvent.js
const img = document.getElementById('hoverImg');

img.addEventListener('mouseenter', () => {
    img.src = 'image2.png';
    img.setAttribute('alt', 'ウシ');
});

img.addEventListener('mouseleave', () => {
    img.src = 'image1.png';
    img.setAttribute('alt', 'ネズミ');
});

動作例

※このボタンは動作確認用です

実行 リセット

実行ボタンを押すと挙動確認ができます。
マウスが要素に入ると画像が変わり、要素からマウスが出ると画像が元の画像に戻ります。
このように、マウスが要素に出入りしたタイミングで画像を切り替えることができます。
なお、画像の切り替え自体はCSSでも実装可能ですが、演出を追加したり、マウスが入っている時間に応じて変化させたい場合は、JavaScriptで制御することでより柔軟な表現が可能になります。
また、mouseover・mouseoutも同様の処理は可能ですが、子要素に対してもイベントが発生するため、より細かい制御が可能です。
ただ、慣れるまではmouseenter・mouseleaveを使う方が扱いやすいです。

touchstart・touchmove・touchend

touchstartイベントは画面に触れたとき、touchmoveイベントは指を動かしている間、touchendイベントは指を離したときに発生します。
これらを組み合わせることで、タッチ操作の流れを判定し、表示の切り替えやスワイプ、ドラッグなどの処理を行うことができます。

コード例

<div id="touchBox">ここをタッチ</div>

#touchBox {
    width: 200px;
    height: 100px;
    background-color: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

//touchEvent.js
const box = document.getElementById('touchBox');

function start() {
    box.textContent = 'タッチ開始';
}

function move() {
    box.textContent = '移動中';
}

function end() {
    box.textContent = 'タッチ終了';
}

box.addEventListener('touchstart', start);
box.addEventListener('touchmove', move);
box.addEventListener('touchend', end);

box.addEventListener('click', start);

動作例

実行ボタンを押すと挙動確認ができます。
まず、操作対象となる要素を取得し、タッチ操作の状態を表示する準備をしています。
touchstart・touchmove・touchendのそれぞれに対応する関数を用意し、要素に対してイベントを登録します。
touchstartは画面に触れたとき、touchmoveは指を動かしている間、touchendは指を離したときに発生します。
それぞれの関数では、テキストの内容を書き換えることで、現在どの操作が行われているかを確認できるようにしています。
これにより、タッチ操作が開始→移動→終了という流れで処理されていることが分かります。
touchイベントはスマートフォンやタブレットで動作しますが、PC環境でもクリックイベントによって、同様の挙動を確認できるようにしています。
PC環境ですべて確認するには、開発者ツールのデバイスモードを使用して、擬似的ではありますが確認が可能です。
ただし、開発者ツールの動作は保証できないため、スマートフォンで確認するのが確実です。