Javascript

いろいろなイベントを見てみよう

ダブルクリックやマウス移動といった、クリック以外のイベントについて見ていきます。

  • dblclick
  • mousemove

dblclick

・ダブルクリックをしたときにコンソールにdouble Clickd!と表示するようにしていきます。

・HTMLにはボタンだけ書いておきます。id属性もつけておきましょう。

・JavaScriptでは、getElementByIdを使ってボタンの情報を取得していき、addEventListenerでダブルクリックをしたらイベントが発生するようにしていきます。普段clickと書いているところをdblclickに変えていけばいいでしょう。

・アロー関数でコンソールにDouble Clicked!と表示されるようにして行くと確認することができます。

mousemove

・マウスを動かしたら動かした分だけ数字が加算されるようなイベントを設定してみます。

・今回は document に直接設定してあげて、文章全体の中でマウスを動かしたら moved! というメッセージが表示されるようにしてみます。

・アドイベントリスナーでmousemoveと設定してあげます。コンソールでmoved!としてあげればおkです。

・左の数値は moved! が何回表示されたかを示しているのですが、マウスを動かす度にどんどん増えていますね。

-Javascript