恵比寿のWebサイト制作・Webデザインチームのブログ。Webデザインやコーディング、SEO対策まで幅広く手掛けています。

恵比寿のデザイン制作チームのブログです。

Webデザイン、
Web制作、
SEO対策の
ご依頼・ご相談

Contact

Javascriptで発生したイベントの種類を確認する方法

投稿日:2018-05-08 更新日:




javascript
今回はJavascriptで発生したイベントの種類を求める方法を紹介します。

発生したイベントの種類に応じて処理を振り分けることができます。
例えば、マウスオーバー時に画像を拡大させ、マウスアウト時に基準のサイズに戻す等の処理を行うことができます。

まずはデモをご覧ください。デモページでマウスを動かしたり、クリックしたりすると、発生したイベントの種類と対象のタグ名が表示されます。

 

 

デモでは、以下のイベントの種類を取得して表示しています。

  • クリック
  • ダブルクリック
  • マウスムーブ
  • マウスアウト
  • キーダウン
  • キーアップ

 

実際に書いたコードは下記になります。

<body>
  <div class="entry-content">
    <h1>イベントの種類を求める</h1>
    <h2>h2です</h2>
    <h3>h3です</h3>
    <p>pです</p>
    <output></output>
  </div>
</body>

 

CSS
CSSでは要素の位置をわかりやすくするために背景色を指定しています。

h1,h2,h3,p{
background: #eee;
}

Javascript

window.addEventListener("DOMContentLoaded", function(){
  //body要素のイベントを取得
  document.body.addEventListener("click", outputType, false);
  document.body.addEventListener("dblclick", outputType, false);
  document.body.addEventListener("mousemove", outputType, false);
  document.body.addEventListener("mouseout", outputType, false);
  document.body.addEventListener("keydown", outputType, false);
  document.body.addEventListener("keyup", outputType, false);
}, false);

//event の種類を表示
function outputType(evnt){
  //output要素への参照を変数に代入
  let element = document.getElementsByTagName("output")[0];
  //event の種類を格納
  let evntType = evnt.type;
  //eventが発生した要素を格納
  let evntElement = evnt.target.tagName;
  //結果を出力
  element.innerHTML = `種類:${evntType}<br>要素:${evntElement}`;
}

 

発生したイベントの種類を求めるためにはイベントオブジェクトのtypeプロパティを利用します。
targetプロパティは、イベントの発生元であるオブジェクトを取得します。

また、targetプロパティにはイベントが発生した要素への参照が入っているため、要素そのものを操作することもできます。

 

発生したイベント情報を取得することで、イベントに対してプログラムを記述することができます。

使う機会は多いと思いますので是非覚えておきましょう。




この記事をシェアする

  • Twitter
  • Facebook
  • BookmarkB!
  • Pocket

Related Entries

この記事を書いた人

TOM

TOM

Webデザイナー、UI/UXデザインと共にJavascript、PHP等のプログラミング言語について日々勉強中。