eventオブジェクト（イベント情報の取得）｜イベント｜JavaScript/DOM

TOP JavaScript/DOMeventオブジェクト（イベント情報の取得）

発生したイベントの型を取得〔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

プロパティ	説明	サポート状況
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

キーボードイベントのプロパティ
プロパティ	説明	サポート状況
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- &copy; 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>

イベント JavaScriptのイベントハンドラ一覧

基本ステートメント（文）

PHP & JavaScript Room

イベントeventオブジェクト（イベント情報の取得）

発生したイベントの型を取得
eventオブジェクトのtypeプロパティ

イベントの発生元であるオブジェクトを取得 ※Firefox,Netscapeのみ
eventオブジェクトのtargetプロパティ

クリックイベント、右クリックイベントの取得

マウスのX座標・Y座標を取得
screenX,screenY,pageX,pageY,clientX,clientY,offsetX,offsetYプロパティ

キーボードイベントを取得
eventオブジェクトのkeyCode/which/modifiersプロパティ

Onmouseoverイベントおよびonmouseoutイベントを渡すエレメントを指定

Dynamic Drive - Highlight Table Cells Script

関連コンテンツ

イベントeventオブジェクト（イベント情報の取得）

発生したイベントの型を取得eventオブジェクトのtypeプロパティ

イベントの発生元であるオブジェクトを取得 ※Firefox,Netscapeのみeventオブジェクトのtargetプロパティ

クリックイベント、右クリックイベントの取得

マウスのX座標・Y座標を取得screenX,screenY,pageX,pageY,clientX,clientY,offsetX,offsetYプロパティ

キーボードイベントを取得eventオブジェクトのkeyCode/which/modifiersプロパティ

Onmouseoverイベントおよびonmouseoutイベントを渡すエレメントを指定

Dynamic Drive - Highlight Table Cells Script

関連コンテンツ

発生したイベントの型を取得
eventオブジェクトのtypeプロパティ

イベントの発生元であるオブジェクトを取得 ※Firefox,Netscapeのみ
eventオブジェクトのtargetプロパティ

マウスのX座標・Y座標を取得
screenX,screenY,pageX,pageY,clientX,clientY,offsetX,offsetYプロパティ

キーボードイベントを取得
eventオブジェクトのkeyCode/which/modifiersプロパティ