Einem Element mehr als einen Event-Handler geben, indem man es mit verschiedenen Selektoren auswählt

Question

Ich habe mehrere "Event" -Klassen, die einige meiner SVG-Elemente abdecken. Ich gebe jeder Klasse einen Ereignishandler für mouseover und mouseout, und wenn ein Element mehr als eine Klasse hat, möchte ich beide Handler auslösen. Wie mache ich das? Es scheint, dass, wenn ich

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

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

dann, wenn ich über ein Element schweben, die beiden Klassen haben, nur B (den zweiten Handler) Feuer, offenbar, weil es die ersten außer Kraft setzt. Gibt es eine Methode, um einen Event-Handler "anzuhängen", anstatt ihn neu zu definieren?

Answer 1

Gemäß den documentation ...

Wenn ein Ereignis-Listener bereits für die gleiche Art auf dem ausgewählte Elemente registriert wurde, werden die bestehenden Zuhörer, bevor der neue Hörer hinzugefügt wird entfernt. Um mehrere Listener für denselben Ereignistyp zu registrieren, kann auf den Typ ein optionaler Namespace folgen, z. B. "click.foo" und "click.bar".

Sie können also erreichen, was Sie wollen, indem Sie jedem Ihrer Handler einen beliebigen Namespace hinzufügen.

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

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

Dies hat den zusätzlichen Vorteil, dass man dann später explizit auf die Event-Handler hinzugefügt beziehen kann (entweder einzeln oder für einen gesamten Namensraum) zu ersetzen oder sie zu entfernen.