prototype.jsリファレンスイベント(Event)
- イベント発生した要素を取得〔element()〕
- マウスの座標を取得〔pointerX()/pointerY()〕
- イベントの伝達を停止〔stop()〕
- イベント発生時に特定の要素を検索〔findElement()〕
- キーコードの指定
- イベントの追加/削除〔observe()/stopObserving()〕
- マウスの左ボタンの押した状態を取得〔isLeftClick()〕
イベント発生した要素を取得
element()
unknown
Event.element(event);
サンプルを見る<div id="elm_elementA">ElementA</div> <div id="elm_elementB">ElementB</div> <div id="elm_elementC">ElementC</div> <script type="text/javascript"> $("elm_elementA","elm_elementB","elm_elementC").each(function(obj){ Event.observe(obj, "click", fElement, false); }); function fElement(event){ alert("「"+Event.element(event).id+"」でクリックイベント発生!"); } </script>
マウスの座標を取得
pointerX()/pointerY()
unknown
Event.pointerX(event);
Event.pointerY(event);
サンプルを見るEvent.pointerY(event);
<p> 【マウス座標】 X:<input type="text" id="res_pointerX" /> Y:<input type="text" id="res_pointerY" /> </p> <script type="text/javascript"> window.onload=function(){ Event.observe(window.document, "mousemove", fPointerXY, false); } function fPointerXY(event){ /* X座標 */ $("res_pointerX").value=Event.pointerX(event); /* Y座標 */ $("res_pointerY").value=Event.pointerY(event); } </script>
イベントの伝達を停止
stop()
unknown
Event.stop(event);
サンプルを見る<form action="#" id="userForm"> ID:<input type="text" id="login" /> <input type="submit" value="ログイン" /> </form> <script type="text/javascript"> Event.observe('userForm', 'submit', function(event) { var login=$F('login').strip(); /* ログインIDに何かしら入力されていたらフォーム送信 */ if(login=="") Event.stop(event); /* そうでない場合は、送信しない */ }); </script>
イベント発生時に特定の要素を検索
findElement()
unknown
Event.findElement(event, タグ名);
サンプルを見る検索されたli要素:<input type="text" id="res_findelement" /> <ul> <li id="item1">項目1</li> <li id="item2">項目2</li> <li id="item3">項目3</li> </ul> <script type="text/javascript"> window.onload=function(){ $("item1","item2","item3").each(function(obj){ Event.observe(obj, "click", fFindElement, false); }); } function fFindElement(event){ var tag=Event.findElement(event, "li"); $("res_findelement").value=tag.id; } </script>
キーコードの指定
unknown
Event.KEY_BACKSPACE
Event.KEY_TAB
Event.KEY_RETURN
Event.KEY_ESC
Event.KEY_LEFT
Event.KEY_UP
Event.KEY_RIGHT
Event.KEY_DOWN
Event.KEY_DELETE
サンプルを見るEvent.KEY_TAB
Event.KEY_RETURN
Event.KEY_ESC
Event.KEY_LEFT
Event.KEY_UP
Event.KEY_RIGHT
Event.KEY_DOWN
Event.KEY_DELETE
<dl> <dt>記事1タイトル</dt> <dd>クリックすると隠れます。</dd> <dt>記事2タイトル</dt> <dd>クリックすると隠れます。</dd> <dt>記事3タイトル</dt> <dd>クリックすると隠れます。</dd> </dl> <script type="text/javascript"> window.onload=function(){ Event.observe(document.body, 'click', function(event) { var element=Event.element(event); if(element.tagName=="DD"){ if(element.visible==false){ element.show(); }else{ element.hide(); } } }); } </script>
イベントの追加/削除
observe()/stopObserving()
unknown
Event.observe(element, eventName, observer, flag);
Event.stopObserving(element, eventName, observer, flag);
サンプルを見るEvent.stopObserving(element, eventName, observer, flag);
<p> <input type="button" value="イベント追加" onclick="fObserve()" /> <input type="button" value="イベント削除" onclick="fStopObserving()" /> </p> <div id="messagebox1">クリックするとアラート表示</div> <script type="text/javascript"> function fShowMessage(){ alert("クリック"); } function fObserve(){ Event.observe($("messagebox1"), "click", fShowMessage, false); } function fStopObserving(){ Event.stopObserving($("messagebox1"), "click", fShowMessage, false); } </script>
マウスの左ボタンの押した状態を取得
isLeftClick()
unknown
Event.isLeftClick(event);
サンプルを見る<p>マウスの左ボタンの押した状態:<input type="text" id="res_isleftclick" size="10" /></p> <script type="text/javascript"> window.onload=function(){ Event.observe(window.document, "mousedown", fIsLeftClick, false); } function fIsLeftClick(event){ $("res_isleftclick").value=Event.isLeftClick(event); } </script>