イベントeventオブジェクト(イベント情報の取得)
- 発生したイベントの型を取得〔eventオブジェクトのtypeプロパティ〕
- イベントの発生元であるオブジェクトを取得 ※Firefox,Netscapeのみ〔eventオブジェクトのtargetプロパティ〕
- クリックイベント、右クリックイベントの取得
- マウスのX座標・Y座標を取得〔screenX,screenY,pageX,pageY,clientX,clientY,offsetX,offsetYプロパティ〕
- キーボードイベントを取得〔eventオブジェクトのkeyCode/which/modifiersプロパティ〕
- Onmouseoverイベントおよびonmouseoutイベントを渡すエレメントを指定
発生したイベントの型を取得
eventオブジェクトのtypeプロパティ
unknown
event.type
IE、Firefox、Netscape
eventオブジェクトのtypeプロパティは、イベントの型を文字列で返します。
返される文字列は以下のいずれかになります。
abort | error | submit | reset | load | unload |
blur | focus | change | click | dblclick | select |
mouseout | mouseover | mousedown | mouseup | mousemove | |
keypress | keyup | keydown | dragdrop | move | resize |

サンプルを見る
<script type="text/javascript">
/* イベントの型を取得 */
function getEventType(event){
var frmObj=document.frmevent;
frmObj.elements["txt"].value=event.type;
}
</script>
<form action="#" name="frmevent">
<p><input type="text" onFocus="getEventType(event)" /></p>
<p><input type="checkbox" onclick="getEventType(event)" /></p>
<p><select onchange="getEventType(event)">
<option value="">▼選択してください</option>
<option value="1">項目1</option>
<option value="2">項目2</option>
</select></p>
<hr />
<p>現在発生しているイベントは:<input type="text" name="txt" size="20" /></p>
</form>
イベントの発生元であるオブジェクトを取得 ※Firefox,Netscapeのみ
eventオブジェクトのtargetプロパティ
unknown
event.target
IE未対応
eventオブジェクトのtargetプロパティは、イベントの発生元であるオブジェクトを返します。 このプロパティは、IEではサポートされていないためundefinedが返されます。
サンプルを見る
<script type="text/javascript"> function getEventTarget(event){ alert("イベント発生元のオブジェクト:"+event.target); } </script> <form action="#"> <a href="#" onclick="getEventTarget(event)">取得</a> <input type="button" value="取得" onclick="getEventTarget(event)" /> </form>
クリックイベント、右クリックイベントの取得
unknown
IE ではクリック(左クリック)と右クリックのどちらが発生したのか区別できますが、Firefox では、右クリック時に、クリックイベントと右クリックイベントの両方が発生してしまうため、クリック時、右クリック時で処理を分けるといったことはできません。

サンプルを見る
<script type="text/javascript"> /* クリック(左クリック) */ document.onclick = function(e){ document.frm.elements[0].value="クリック!"; return false; } /* 右クリック */ document.oncontextmenu = function(e){ document.frm.elements[0].value="右クリック!"; return false; /* 'false' を返すと、右クリックメニューが非表示になります */ } </script> <form action="#" name="frm"> <p> 画面上で、クリックまたは右クリックをしてみてください。 クリックイベント発生に応じたメッセージが、テキストボックスに表示されます。 IEでは正常に動作しますが、FireFoxで右クリックすると、 クリックイベントと右クリックイベントの両方が発生します。 そのため、クリック時、右クリック時で処理を分けるといったことはできません。 </p> <p><input type='text' size="20" readonly="readonly" /></p> </form>
マウスのX座標・Y座標を取得
screenX,screenY,pageX,pageY,clientX,clientY,offsetX,offsetYプロパティ
unknown
event.screenX/event.screenY
event.pageX/event.pageY
event.clientX/event.clientY
event.offsetX/event.offsetY
event.pageX/event.pageY
event.clientX/event.clientY
event.offsetX/event.offsetY
プロパティ | 説明 | サポート状況 |
---|---|---|
screenX | モニタ画面上のX座標 | IE Firefox Netscape |
screenY | モニタ画面上のY座標 | IE Firefox Netscape |
pageX | ページ上のX座標 | Firefox Netscape |
pageY | ページ上のY座標 | Firefox Netscape |
clientX | ウィンドウ上の座標 | IE |
clientY | ウィンドウ上の座標 | IE |
offsetX | クリックした要素上の座標 | IE Firefox Netscape |
offsetY | クリックした要素上の座標 | IE Firefox Netscape |

サンプルを見る
<script type="text/javascript"> /* マウスのXY座標を取得 */ function getMouseXY_ie(){ /* IE */ document.xy.screen_x.value=event.screenX; document.xy.screen_y.value=event.screenY; document.xy.page_x.value=event.pageX; document.xy.page_y.value=event.pageY; document.xy.client_x.value=event.clientX; document.xy.client_y.value=event.clientY; document.xy.offset_x.value=event.offsetX; document.xy.offset_y.value=event.offsetY; } function getMouseXY(event){ /* Firefox, Netscape */ document.xy.screen_x.value=event.screenX; document.xy.screen_y.value=event.screenY; document.xy.page_x.value=event.pageX; document.xy.page_y.value=event.pageY; document.xy.client_x.value=event.clientX; document.xy.client_y.value=event.clientY; document.xy.offset_x.value=event.offsetX; document.xy.offset_y.value=event.offsetY; } /* onMouseMoveイベントが発生したら、マウスのXY座標を取得する処理を実行 */ document.onmousemove=(document.all) ? getMouseXY_ie : getMouseXY; </script> <form action="#" name="xy"> <table> <tr><td>screenX(モニタ画面上のX座標)</td><td>=</td><td><input type="text" name="screen_x" /></td></tr> <tr><td>screenY(モニタ画面上のY座標)</td><td>=</td><td><input type="text" name="screen_y" /></td></tr> <tr><td>pageX(ページ上のX座標)</td><td>=</td><td><input type="text" name="page_x" /> ※Firefox、Netscapeのみ</td></tr> <tr><td>pageY(ページ上のY座標)</td><td>=</td><td><input type="text" name="page_y" /> ※Firefox、Netscapeのみ</td></tr> <tr><td>clientX(ウィンドウ上のX座標)</td><td>=</td><td><input type="text" name="client_x" /> </td></tr> <tr><td>clientY(ウィンドウ上のY座標)</td><td>=</td><td><input type="text" name="client_y" /> </td></tr> <tr><td>offsetX(クリックした要素上のX座標)</td><td>=</td><td><input type="text" name="offset_x" /> ※IEのみ</td></tr> <tr><td>offsetY(クリックした要素上のY座標)</td><td>=</td><td><input type="text" name="offset_y" /> ※IEのみ</td></tr> </table> </form>
キーボードイベントを取得
eventオブジェクトのkeyCode/which/modifiersプロパティ
unknown
event.keyCode
event.which
event.modifiers
event.which
event.modifiers
プロパティ | 説明 | サポート状況 |
---|---|---|
keyCode | 修飾キーの番号を参照 | IE Firefox Netscape |
which | キーコード参照 | IE |
modifiers | キーコード参照 | Firefox Netscape |

サンプルを見る
<script type="text/javascript"> /* イベントの型を取得 */ function getKevent_ie(){ /* IE */ kcode=event.keyCode; kstr=String.fromCharCode(kcode); alert("キーコード:"+kcode+"\nキー:"+kstr); } function getKevent(event){ /* Firefox, Netscape */ console.log(event); kmd=event.modifiers; kcode=event.which; kstr=String.fromCharCode(kcode); alert("キーコード:"+kcode+"\nキー:"+kstr+"\n装飾キー:"+kmd); } document.onkeydown=(document.all) ? getKevent_ie : getKevent; </script> <p>キーを押すと、押したキーの情報がアラート表示されます。</p>
Onmouseoverイベントおよびonmouseoutイベントを渡すエレメントを指定
unknown
Dynamic Drive - Highlight Table Cells Script
IE 5+、Firefox 1+、Opera 7+
著作権表示
テーブル要素にマウスが乗ったとき(onmouseover)とマウスが離れたとき(onmouseover)に行またはセルの背景色を変更するスクリプトです。 行の背景色を変更するようにしたい場合は、列見出しとなるtr要素にid='ignore'を指定します。 行ではなく各セルの背景色を変更するようにしたい場合は、td要素にid='ignore'を指定します。

サンプルを見る
<script type="text/javascript"> /*********************************************** * Highlight Table Cells Script- © Dynamic Drive DHTML code library (www.dynamicdrive.com) * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts * This notice must stay intact for legal use ***********************************************/ /* セルをハイライトする場合は"TD"、行全体をハイライトする場合は"TR"を指定 */ var highlightbehavior="TR" var ns6=document.getElementById&&!document.all var ie=document.all function changeto(e,highlightcolor){ source=ie? event.srcElement : e.target if (source.tagName=="TABLE") return while(source.tagName!=highlightbehavior && source.tagName!="HTML") source=ns6? source.parentNode : source.parentElement if (source.style.backgroundColor!=highlightcolor&&source.id!="ignore") source.style.backgroundColor=highlightcolor } function contains_ns6(master, slave) { //check if slave is contained by master while (slave.parentNode) if ((slave = slave.parentNode) == master) return true; return false; } function changeback(e,originalcolor){ if (ie&&(event.fromElement.contains(event.toElement)||source.contains(event.toElement)||source.id=="ignore")||source.tagName=="TABLE") return else if (ns6&&(contains_ns6(source, e.relatedTarget)||source.id=="ignore")) return if (ie&&event.toElement!=source||ns6&&e.relatedTarget!=source) source.style.backgroundColor=originalcolor } </script> <table onMouseover="changeto(event, '#C5E5F3')" onMouseout="changeback(event, 'white')" border="1"> <tr id="ignore"><th>プロパティ</th><th>構文</th><th>説明</th></tr> <tr><td>backgroundColor</td><td><code><em>obj</em>.style.backgroundColor</code></td><td>要素の背景色を取得・設定。色名またはRGB値を設定可能。</td></tr> <tr><td>fromElement</td><td><code><em>obj</em>.fromElement</code></td><td>onmouseoverイベントとonmouseoutイベントから送られるエレメントを特定。</td></tr> <tr><td>parentElement</td><td><code><em>obj</em>.parentElement</code></td><td>要素の親エレメントを返す。最上位の要素の場合は<span class='em'>NULL</span>を返す。</td></tr> <tr><td>srcElement</td><td><code><em>obj</em>.srcElement</code></td><td>イベントで実行される要素を指定。</td></tr> <tr><td>toElement</td><td><code><em>obj</em>.toElement</code></td><td>onmouseoverイベントおよびonmouseoutイベントを渡すエレメントを指定。</td></tr> <tr><td>tagName</td><td><code><em>obj</em>.tagName</code></td><td>現在の要素のタグ名を返す。</td></tr> </table>