web-dev-qa-db-ja.com

プロトタイプを使用してイベントをトリガーする

JQueryのトリガー関数でできるように、Prototypeでイベントをトリガーするメソッドを知っている人はいますか？

Observeメソッドを使用してイベントリスナーをバインドしましたが、プログラムでイベントを発生させることもできます。

前もって感謝します

javascripteventsprototypejs
61
Neil Aitken

_event.simulate.js_ ニーズに合います。

私はこれを数回使用しましたが、それは魅力のように機能します。次のようなクリックまたはホバーなど、ネイティブイベントを手動でトリガーすることができます：

_$('foo').simulate('click');
_

これの素晴らしいところは、自分で要素をクリックしたかのように、すべてのアタッチされたイベントハンドラが実行されることです。

カスタムイベントの場合、標準のプロトタイプメソッド Event.fire() を使用できます。

85
Aron Rotteveel

私はPrototypeに組み込まれているものはないと思いますが、これを使用できます（テストされていませんが、少なくとも正しい方向に導く必要があります）：

Element.prototype.triggerEvent = function(eventName)
{
    if (document.createEvent)
    {
        var evt = document.createEvent('HTMLEvents');
        evt.initEvent(eventName, true, true);

        return this.dispatchEvent(evt);
    }

    if (this.fireEvent)
        return this.fireEvent('on' + eventName);
}

$('foo').triggerEvent('mouseover');
35
Greg

この投稿は役に立ちました... http://jehiah.cz/archive/firing-javascript-events-properly

FirefoxとIEの両方でイベントを発生させる方法について説明します。

function fireEvent(element,event){
    if (document.createEventObject){
        // dispatch for IE
        var evt = document.createEventObject();
        return element.fireEvent('on'+event,evt)
    }
    else{
        // dispatch for firefox + others
        var evt = document.createEvent("HTMLEvents");
        evt.initEvent(event, true, true ); // event type,bubbling,cancelable
        return !element.dispatchEvent(evt);
    }
}
5
John D

ここでの答えは、「通常の」イベント、つまりユーザーエージェントによって定義されるイベントの場合に当てはまりますが、カスタムイベントの場合は、プロトタイプの「発射」メソッドを使用する必要があります。例えば.

$('something').observe('my:custom', function() { alert('Custom'); });
.
.
$('something').fire('my:custom'); // This will cause the alert to display
3
Haqa