event.typeプロパティ

event.typeは、発生したイベントのタイプを返すプロパティ。

構文

event.type

戻り値

発生したイベントのタイプ名。

サンプル

イベントタイプ:

クリック ダブルクリック マウスオーバー マウスアウト

サンプルの動作について

  • 「クリック」をクリックすると、「イベントタイプ:」の右横に、「click」と表示する。
  • 「ダブルクリック」をダブルクリックすると、「イベントタイプ:」の右横に、「dblclick」と表示する。
  • 「マウスオーバー」にマウスのカーソルを合わせると、「イベントタイプ:」の右横に、「mouseover」と表示する。
  • 「マウスアウト」からマウスのカーソルを外すと、「イベントタイプ:」の右横に、「onmouseout」と表示する。

サンプルのソースコード

JavaScript

<script type="text/javascript">
function sample1type( $event ) {
 document.getElementById( "sample1Output" ).innerHTML = $event.type;
}
</script>

HTML

<div id="sample1">
 <p>イベントタイプ:<span id="sample1Output"></span></p>
 <p id="sample1event">
  <span onclick="sample1type(event);">クリック</span>
  <span ondblclick="sample1type(event);">ダブルクリック</span>
  <span onmouseover="sample1type(event);">マウスオーバー</span>
  <span onmouseout="sample1type(event);">マウスアウト</span>
 </p>
</div>

CSS

<style>
#sample1 {
 padding: 10px;
 background-color: #f0f0f0;
 border: 1px solid gray;
 border-radius: 10px;
}
#sample1event span {
 padding: 5px;
 background-color: yellow;
 border: 1px solid red;
 border-radius: 5px;
 cursor: pointer;
}
</style>

スポンサード リンク

カテゴリー: DOM, Eventオブジェクト, JavaScript, イベント, プロパティ, リファレンス パーマリンク