異なるセレクタを使用して複数のイベントハンドラを選択して要素を与える

Question

私はいくつかの「イベント」クラスをいくつかの私のSVG要素に適用しています。各クラスにmouseoverとmouseoutのイベントハンドラを割り当てています。要素に複数のクラスがある場合は、両方のハンドラを起動します。これはどうすればいいですか？私はそれが最初のものよりも優先されますので、明らかクラスのみB（第2ハンドラ）火災、両方を持っている要素にカーソルを合わせると、私はその後、

d3.selectAll(".a-class") 
    .on("mouseover", function() { 
     // do A 
    }) 
    .etc(); 

d3.selectAll(".another-class") 
    .on("mouseover", function() { 
     // do B 
    }) 
    .etc(); 

を行うときようです。それを再定義するのではなく、イベントハンドラを「追加」する方法はありますか？

Answer 1

イベントリスナーがすでに選択された要素の同じタイプに対して登録された場合は、新たなリスナーが追加される前documentation ...

を1として、既存のリスナーが削除されました。同じイベントタイプの複数のリスナーを登録するには、typeに "click.foo"や "click.bar"などのオプションの名前空間を続けることができます。

したがって、それぞれのハンドラに任意の名前空間を追加することで、必要なものを実現できます。

d3.selectAll(".a-class") 
    .on("mouseover.a", function() { 
     // do A 
    }) 
    .etc(); 

d3.selectAll(".another-class") 
    .on("mouseover.b", function() { 
     // do B 
    }) 
    .etc(); 

これは、あなたがそれらを交換するか、または削除するには、後に（個別に、または名前空間全体のために）追加されたイベントハンドラを明示的に参照することができます追加の利点を持っています。