javascript - d3 stopPropagation - "mousedown.log" -


i learning d3 , came across previous topic discussing stoppropagation(). jasondavies posted reply question , example here https://gist.github.com/jasondavies/3186840.

in example uses:

    .on("mousedown", function() { d3.event.stoppropagation(); })     .on("mousedown.log", log("mousedown circle")) 

i don't understand event "mousedown.log" , how triggered in example.

here full code jasondavies's example:

<!doctype html> <style>   circle { fill: lightgreen; stroke: #000; } </style> <body> <script src="http://d3js.org/d3.v2.min.js"></script> <script> var svg = d3.select("body").append("svg")     .style("float", "left")     .attr("width", 480)     .attr("height", 480)     .on("mousedown", log("mousedown svg"))     .on("mouseup", log("mouseup svg"))     .on("click", log("click svg"));  svg.append("circle")     .attr("cx", 240)     .attr("cy", 240)     .attr("r", 200)     .on("mousedown", function() { d3.event.stoppropagation(); })     .on("mousedown.log", log("mousedown circle"))     .on("mouseup", log("mouseup circle"))     .on("click", log("click circle"))  var div = d3.select("body").append("div")     .style("float", "left")  function log(message) {   return function() {     div.append("p")         .text(message)         .style("background", "#ff0")       .transition()         .duration(2500)         .style("opacity", 1e-6)         .remove();   }; } </script> 

it's namespacing events. see the documentation:

if event listener registered same type on selected element, existing listener removed before new listener added. register multiple listeners same event type, type may followed optional namespace, such "click.foo" , "click.bar". first part of type ("click" example) used register event listener (using element.addeventlistener()) , methods added on selected elements __onclick.foo , __onclick.bar. remove listener, pass null listener. remove listeners particular event type, pass null listener, , .type type, e.g. selection.on(".foo", null).

in particular example, means both handlers called when mousedown event occurs. without namespacing, second handler overwrite first.


Comments

Popular posts from this blog

c# - Where does the .ToList() go in LINQ query result -

Listeners to visualise results of load test in JMeter -

android - CollapsingToolbarLayout: position the ExpandedText programmatically -