カスタムイベントをブロードキャストできますか？

私は体内のすべての3つの要素がいくつかのイベント（relevant code pen）に加入している以下のようなセットアップ、持っている：CustomEventはバブルアップとし、私の知る限りではカスタムイベントをブロードキャストできますか？

var div = document.querySelector('div'); 
 
var span = document.querySelector('span'); 
 
var button = document.querySelector('button'); 
 
    
 
div.addEventListener('ding', function() { 
 
    console.log('click'); 
 
}); 
 
    
 
span.addEventListener('ding', function() { 
 
    console.log('clack'); 
 
}); 
 
    
 
button.addEventListener('ding', function() { 
 
    console.log('bang'); 
 
}); 
 
    
 
document.body.dispatchEvent(new CustomEvent('ding')); // ??? 
 
// expected output: 'click clack bang'

<body> 
 
    <div></div> 
 
    <span></span> 
 
    <button></button> 
 
</body>

をおそらく私が必要とするものです。 CustomEventを発送して、3人のハンドラのすべてが発砲する可能性はありますか？

出典

2016-07-11 Zomagk

コンテンツ）;シングルトンが良くなることがあります。あなたはそれが

EDITを役に立てば幸い...だけでなく、リスナーを削除するメソッドを追加し、多分など「クリック」のような通常のイベントを処理するコードを少し変更することができますあなたの質問の** **あなたの質問には、単にリンクされていません。 –

なぜこのようなイベントを使用したいのですか？ – Ionut

@Ionut、別々の部分からアプリ全体のイベントをブロードキャストします。ユーザーがログインしたことを他人に知らせるログインフォームなど。 – Zomagk

3つの要素のそれぞれで個別にイベントを発生させる必要があります。ただし、document.body.dispatchEvent(new CustomEvent('ding'));が呼び出されると、各要素のイベントを発生させるためにdocument.bodyにaddEventListener()を使用できます。

例：

var div = document.querySelector('div'); 
 
var span = document.querySelector('span'); 
 
var button = document.querySelector('button'); 
 

 
div.addEventListener('ding', function() { 
 
    console.log('click'); 
 
}); 
 

 
span.addEventListener('ding', function() { 
 
    console.log('clack'); 
 
}); 
 

 
button.addEventListener('ding', function() { 
 
    console.log('bang'); 
 
}); 
 

 
document.body.addEventListener('ding', function() { 
 
    div.dispatchEvent(new CustomEvent('ding')); 
 
    span.dispatchEvent(new CustomEvent('ding')); 
 
    button.dispatchEvent(new CustomEvent('ding')); 
 
}); 
 

 
document.body.dispatchEvent(new CustomEvent('ding'));

<body> 
 
    <div></div> 
 
    <span></span> 
 
    <button></button> 
 
</body>

出典

2016-07-11 07:45:55

3つの要素のそれぞれに個別に発射する必要があります。あなたが言うように、パスは要素からのルートまでです。キャプチャフェーズ（これ以上はほとんど使用しない）でさえも、ターゲット要素に移動するだけで、それ以上は実行されません。

出典

2016-07-11 07:40:06

実際には、各要素にそれを起動する必要があります...私はあなたがリスナーを上に追加したい要素を覚えているラッパーを書くことができると思います。そして、あなたがイベントをboradcastする方法を必要とする...あなたは、モジュール内のすべてのものを書くことができます。

var EventManager = (function(){ 
 
\t var events = {}; 
 

 
\t return { 
 
    \t  addEventListener : function (element, eventId, callback){ 
 
     \t // check if you already have this event 
 
      if (!events[eventId]) 
 
     \t   events[eventId] = []; 
 
     
 
      // add the listener 
 
      element.addEventListener(eventId, callback); 
 
     
 
      // remember the element 
 
      events[eventId].push(element); 
 
     }, 
 
    
 
     dispatch: function(eventId){ 
 
      if (!events[eventId]) 
 
     \t  return; 
 
     
 
      // get every element where you want to dispatch the event 
 
      events[eventId].forEach(function(element){ 
 
     \t  element.dispatchEvent(new CustomEvent(eventId)); 
 
      }) 
 
     } 
 
    } 
 
})()

が、私はそれはそれは私が考える仕事をしなければならないことをテストdidntの。

出典

2016-07-11 07:56:50

カスタムイベントをブロードキャストできますか？

答えて

関連する問題