web-dev-qa-db-ja.com

クロスブラウザ互換のCustomEvent

イベントリスナーにデータを渡すカスタムイベントを作成する必要があります。私はすでに以下のようなものを作成しました

CustomEvent

_var event = new CustomEvent('store', { 'detail': obj });
document.getElementById("Widget").dispatchEvent(event);
_

リスナー

_document.getElementById("Widget").addEventListener('store', function (e) {
  console.log(e.detail);
  document.getElementById("result").innerHTML = e.detail.name+"<br>"+e.detail.address;
}, false);
_

ChromeやFirefoxなどのブラウザでは正常に動作していますが、IE11では動作しません。IEでエラーが発生します。

オブジェクトはこのアクションをサポートしていません

CustomEventがIEで機能していません。

このクロスブラウザを互換性を持たせるにはどうすればよいですか？ ListenerがjQueryのあるページにない可能性があるため、jQuery trigger()を使用したくありません

javascriptjqueryeventscross-browserjquery-events
11
Sarath S Nair

CustomEventコンストラクターはIE11ではサポートされていません。次のポリフィルを使用できます

(function () {

     if ( typeof window.CustomEvent === "function" ) return false;

     function CustomEvent ( event, params ) {
         params = params || { bubbles: false, cancelable: false, detail: undefined };
         var evt = document.createEvent('CustomEvent');
         evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
         return evt;
     }

     CustomEvent.prototype = window.Event.prototype;

     window.CustomEvent = CustomEvent;
})();

[〜＃〜] mdn [〜＃〜] からコピー

15
Sandeeproop

「使用できますか」ページと、カスタムイベントについての説明をご覧ください。

http://caniuse.com/#feat=customevent

具体的には、この引用を読んでください：

Window.CustomEventオブジェクトは存在しますが、コンストラクターとして呼び出すことはできません。 new CustomEvent（...）の代わりに、e = document.createEvent（ 'CustomEvent'）を使用してから、e.initCustomEvent（...）を使用する必要があります。

2
dlopez

jQueryを使用する最も簡単な方法が1つあります。それは、$.Eventです。

Event Listener

$("#Widget").on('store', function (data) {
  console.log(data.detail);
  document.getElementById("result").innerHTML = data.detail.name+"<br>"+e.detail.address;
});

イベントの生成/トリガー

var data = { 'detail': obj };
$("#Widget").trigger($.Event('store', data));

ハッピーコーディング:-)

1
Dharmendrasinh Chudasama