JavaScript 発生したイベントの種類を求める
発生したイベントの種類を求めるには、イベントオブジェクトの「type」プロパティを参照します。また、「target」プロパティにはイベントが発生した要素への参照が入っているため、要素名や要素そのおのを操作することもできます。なお、発生したイベントに応じて処理を振り分けることもできます。
主なイベント
| イベント | 説明 |
|---|---|
| click | クリック |
| dblclick | ダブルクリック |
| mouseover | マウスオーバー |
| mouseout | マウスアウト |
| mousemove | マウス移動 |
| keydown | キーが押された |
| keyup | キーが離された |
<body>
<script>
window.addEventListener("load" , function(){
//body要素のイベントをキャプチャー
document.body.addEventListener("click",outputType,false);
document.body.addEventListener("mousemove",outputType,false);
}, false);
//イベントの種類を表示
function outputType(evt){
var ele = document.getElementsByTagName("output")[0];
//イベントの種類を求める
var evtType = evt.type;
//イベントが発生した要素
var evtElelement = evt.target.tagName;
ele.innerHTML = "種類："+evtType+"<br>";
ele.innerHTML += "要素："+evtElelement+"<br>";
//イベントの伝達を禁止
evt.stopPropagation();
}
</script>
<h1>発生したイベントの種類</h1>
<output></output>
</body>ページ上にマウスを移動させるかクリックすると、イベントの種類と発生したタグ名が表示されます。
画面書き換えのタイミングや処理速度が速すぎるため、種類のところにclickが表示されない場合があります。その場合は、console.log()メソッドを使ってevtTypeを出力すると確認ができます。