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>