こんにちは。
前回の記事「JavaScriptのaddEventListenerでインタラクティブなウェブサイトを作る方法 その①」では、クリックやタッチなどの基本的なイベントリスナーについて紹介しました。
今回は、その続きとして、mousemoveやtouchmove、scrollイベントについて解説します。
これらのイベントを使うことで、さらに動きのあるウェブサイトを作れるようになります。
概要
`addEventListener`を使って、特定のイベントが発生したときに実行される関数を登録できます。
今回は、マウスの動きやスクロールに反応するイベントリスナーを紹介します。
イベントリスナーの基本
１．mousemoveイベント：
`mousemove`イベントは、ユーザーがマウスを動かしたときに発生します。
例えば、マウスの位置を追跡して表示するコードは次のようになります：
入会申込
ログイン
document.addEventListener('mousemove', function(event) {
document.getElementById('position').textContent = `X: ${event.clientX}, Y: ${event.clientY}`;
});
２．touchmoveイベント：
`touchmove`イベントは、ユーザーがタッチスクリーン上で指を動かしたときに発生します。
以下は、タッチの位置を追跡する例です：
document.addEventListener('touchmove', function(event) {
let touch = event.touches[0];
document.getElementById('touchPosition').textContent = `X: ${touch.clientX}, Y: ${touch.clientY}`;
});
３．scrollイベント：
`scroll`イベントは、ユーザーがページをスクロールしたときに発生します。
例えば、スクロール位置を表示するコードは次のようになります：
window.addEventListener('scroll', function() {
document.getElementById('scrollPosition').textContent = `スクロール位置: ${window.scrollY}`;
});
４．resizeイベント：
`resize`イベントは、ブラウザウィンドウのサイズが変更されたときに発生します。
以下は、ウィンドウのサイズを表示するコードの例です：
window.addEventListener('resize', function() {
document.getElementById('windowSize').textContent = `幅: ${window.innerWidth}, 高さ: ${window.innerHeight}`;
});
５．dblclickイベント：
`dblclick`イベントは、ユーザーが要素をダブルクリックしたときに発生します。
例えば、要素をダブルクリックしたときに色を変更するコードは次のようになります：
document.getElementById('myElement').addEventListener('dblclick', function() {
this.style.backgroundColor = 'lightblue';
});
６．contextmenuイベント：
`contextmenu`イベントは、ユーザーが右クリックしたときに発生します。
以下は、右クリックしたときにカスタムメニューを表示するコードの例です：
document.getElementById('myElement').addEventListener('contextmenu', function(event) {
event.preventDefault();
alert('カスタムメニューを表示');
});
実際の活用例
これらのイベントリスナーを使うことで、ユーザーの動きに応じたダイナミックな反応をウェブページに組み込むことができます。
私もこれらの方法を活用して、よりインタラクティブなウェブアプリケーションを作成しています。
ぜひ試してみてください！
