web-dev-qa-db-ja.com

パラメータを使用したイベントのトリガー

これはかなり迷惑です。 JavaScriptでイベントをトリガーするだけです。通常どおりにイベントオブジェクトをパラメーターに渡し、追加のカスタムパラメーターを渡す必要があります。

JQueryでは、これは非常に簡単です。

$('#element').trigger('myevent', 'my_custom_parameter');

しかし、私はこれを使いたくありません。これに関して私が見つけた他のすべての質問は、「jQueryを使う！」これは私が開発しているプラ​​グイン用で、1つのメソッドにjQueryを必要とするのはばかげています。誰もがクロスブラウザ互換のバニラJSで上記を行う方法を指摘できますか？

javascriptcustom-events
19
andy

カスタムイベントを作成できます http://jsfiddle.net/9eW6M/

HTML

<a href="#" id="button">click me</a>

JS

var button = document.getElementById("button");
button.addEventListener("custom-event", function(e) {
    console.log("custom-event", e.detail);
});
button.addEventListener("click", function(e) {
    var event = new CustomEvent("custom-event", {'detail': {
        custom_info: 10,
        custom_property: 20
    }});
    this.dispatchEvent(event);
});

リンクをクリックした後の出力：

custom-event Object {custom_info: 10, custom_property: 20}

詳細は here で確認できます。

18
Krasimir

イベントを作成する

単純なイベントを作成するには、Eventコンストラクターを使用します。

var event = document.createEvent('MyEvent');

ただし、イベントとともにデータを渡したい場合は、代わりにCustomEventコンストラクターを使用してください。

var event = CustomEvent('MyEvent', { 'detail': 'Wow, my very own Event!' });

イベントのディスパッチ

その後、targetElement.dispatchEventを使用してイベントを発生させることができます。

var elem =document.getElementById('myElement');
elem.dispatchEvent(event);

イベントをキャッチ

elem.addEventListener('MyEvent', function (e) { console.log(e.detail); }, false);

古いブラウザ（IE9以前）

document.createEvent関数を使用する必要があります。

// Create the event.
var event = document.createEvent('Event');

// Define that the event name is 'build'.
event.initEvent('MyEvent', true, true);

//Any Element can dispatch the event
elem.dispatchEvent(event);

このメソッドは非推奨であり、互換性の目的でのみ使用する必要があることに注意してください。

その他のヘルプ： https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events/Creating_and_triggering_events：MDN：Creating_and_triggering_events

9
nedR

イベントオブジェクトと追加のカスタムパラメータ

これは、ネイティブDOMメソッドでは不可能です。ハンドラーは、イベントオブジェクトである1つの引数だけで呼び出されます。したがって、渡す必要があるデータがある場合は、それをイベントオブジェクトの（カスタム）プロパティにする必要があります。そのためにDOM4 CustomEventコンストラクタ を使用できます（クロスブラウザシムのMDNドキュメントを参照）。

次に、（カスタムまたはネイティブの）スクリプトトリガーイベントで通常行うように dispatchEvent を使用します。 IE 9未満の場合、 fireEvent を使用する必要があるようです。

4
Bergi