今回は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プロパティにはイベントが発生した要素への参照が入っているため、要素そのものを操作することもできます。
発生したイベント情報を取得することで、イベントに対してプログラムを記述することができます。
使う機会は多いと思いますので是非覚えておきましょう。
