Javascriptを使ったユーザーアクションの取り扱い

webデザイナー平尾誠です。
javascriptの学習をやり直していたら、わからないことだらけでした。
今後も逆引き形式でまとめていきますので、わからないところだけをつまんでご覧ください。

Javascriptを使ったユーザーアクションの取り扱い

ユーザー操作時に処理を実行したい時

イベント発生時に処理を行いたい

addEventListner()メソッドを用いると、イベント発生時に呼びだす関数を指定できます。

こうも書けます。

イベントを一度だけ呼び出したい

一度だけイベントを呼び出したいときはonceを使います。

設定したイベントリスナーを削除したい

removeEventListener()を使えば、イベントリスナーを削除できます。

ページが表示されたときに処理をしたい

DOM要素にアクセうすできるようになったタイミングで着火させる、もs気宇は画像が全て読み込まれてから処理を行うときに有効です。

クリック時に処理をしたい

マウスを押したときや動かしたいときに処理をしたい

  • マウスのドラッグに合わせて画像をアニメーションさせたいとき
  • フリック操作を実現したい時
イベント名
mousedown:マウスボタンを押したとき
mouseup:マウスボタンを離したとき
mousemove:マウスを動かしたとき

マウスオーバー時に処理をしたい その1

マウスホバー時にインタラクションを実装したいとき

イベント名
mouseenter:マウスが要素上に乗ったとき
mouseleave:マウスが要素上から離れたとき

マウスオーバー時に処理をしたい その2

指定したものをも包括する親要素にも影響を及ぼす(バブリング)するパターンです。

マウス操作時の座標を取得したい

マウスのクリック位置を取得したいときや、マウスの動きに合わせて要素を動かしたいときに有効です。

イベント名
event.clientX:ブラウザー左上を基準としたX座標
event.clientY:ブラウザー左上を基準としたY座標
event.offsetX:要素左上を基準としたX座標
event.offsetY:要素左上を基準としたY座標
event.pageX:ページ左上を基準としたX座標
event.pageY:ページ左上を基準としたY座標
event.screenX:デバイス左上を基準としたX座標
event.screenY:デバイス左上を基準としたY座標

スクロール量を測る

scrollイベントは、対象の要素がスクロールしたときに発生します。

タッチ操作時に処理をしたい

スマートフォンで画面をタップしたときに行う処理

イベント名
touchstart:タッチを開始したとき
touchmove:タッチポイントを動かしたとき
touchend:タッチを終了したとき

タブがバックグランドになった時に処理をしたい

ブラウザのタブがバックグランドになった時に負荷の重い処理を止める

イベント名
visibilitychange:ブラウザの表示状態が変わった時

画面サイズが変更になった時に処理をする

  • ウインドウサイズが変更になったとき、小さい時で処理を分けたい時
  • リサイズ時にレイアウトを調整したい時
イベント名
resize:ブラウザのウインドウサイズが変わった時

まとめ:参考図書

Javascriptについて最強の書のこちらを使って学習しています。
初学者から中級者への内容となっており、逆引き出来るように短いセクションごとに区切られてあります。

今回はProgateやドットインストールの学習を終えた方へ向けて、目を通しておくといい部分を紹介しました。

実は自分のための総復習として書き始めたのですが、知らないことがたくさんありました。

学習は終わらない。

ほなね