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
Post a Comment