Search
  1. 発生したイベントの型を取得〔eventオブジェクトのtypeプロパティ〕
  2. イベントの発生元であるオブジェクトを取得 ※Firefox,Netscapeのみ〔eventオブジェクトのtargetプロパティ〕
  3. クリックイベント、右クリックイベントの取得
  4. マウスのX座標・Y座標を取得〔screenX,screenY,pageX,pageY,clientX,clientY,offsetX,offsetYプロパティ〕
  5. キーボードイベントを取得〔eventオブジェクトのkeyCode/which/modifiersプロパティ〕
  6. Onmouseoverイベントおよびonmouseoutイベントを渡すエレメントを指定

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

unknown

event.type
IE、Firefox、Netscape

eventオブジェクトのtypeプロパティは、イベントの型を文字列で返します。
返される文字列は以下のいずれかになります。

aborterrorsubmitresetloadunload
blurfocuschangeclickdblclickselect
mouseoutmouseovermousedownmouseupmousemove 
keypresskeyupkeydowndragdropmoveresize
サンプルを見る
<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>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop

polarized women