Search

イベント発生した要素を取得
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);
サンプルを見る
<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
サンプルを見る
<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);
サンプルを見る
<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>

関連コンテンツ

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

投票する 投票結果を見る

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

pagetop

polarized women