JS キーイベントとスクロールイベント keydown/up と scroll

今回は、「キーイベント」と「スクロールイベント」について見てみましょう。

説明は難しくありませんが、実際のプログラムで利用すると、意外とつまずきやすいイベントです。

keydown と keyup
scroll
あとがき

keydown と keyup

名前のとおり、「keydown」はキーが押された時、「keyup」はキーが離れた時に発生するイベントです。

    <div class="out" id="outid">
      <textarea name="textarea" id="text" cols="30" rows="10"></textarea>
    </div>

let keyDown = document.getElementById('text');
keyDown.addEventListener('keydown', function (e) {
  console.log('keydown : ' + e.key);
});

keyDown.addEventListener('keyup', function (e) {
  console.log('keyup : ' + e.key);
});

ボックス内にキーボードからキーを打ち込むと、コンソールに、「keydown」と「keyup」が打ち込んだキーと共に表示されます。

keydown : a
keyup : a
keydown : b
keyup : b
keydown : c
keyup : c
keydown : Backspace
keyup : Backspace

「keypress」という、「keydown」に似たイベントがありましたが、現在はレガシーとなっていて、非推奨のイベントです。

scroll

「scroll」は、要素がスクロールされた時に発生します。

    <div id="scrollsize" class="size">スクロールサイズ</div>

let scrollSize = document.getElementById('scrollsize');
window.addEventListener('scroll', function () {
  scrollSize.innerHTML = window.scrollY + 'px';
});

スクロールサイズ

スクロールするたびにイベントが発生しています。

スクロールの量によって何かを表示したりするときなどに利用されたりします。