event.typeは、発生したイベントのタイプを返すプロパティ。
構文
event.type
戻り値
発生したイベントのタイプ名。
サンプル
イベントタイプ：
クリック ダブルクリック マウスオーバー マウスアウト
サンプルの動作について
- 「クリック」をクリックすると、「イベントタイプ：」の右横に、「click」と表示する。
- 「ダブルクリック」をダブルクリックすると、「イベントタイプ：」の右横に、「dblclick」と表示する。
- 「マウスオーバー」にマウスのカーソルを合わせると、「イベントタイプ：」の右横に、「mouseover」と表示する。
- 「マウスアウト」からマウスのカーソルを外すと、「イベントタイプ：」の右横に、「onmouseout」と表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function sample1type( $event ) {
document.getElementById( "sample1Output" ).innerHTML = $event.type;
}
</script>
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>
<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>
#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>