D3 stopPropagation - " mousedown.бревно"


Я изучаю d3 и наткнулся на предыдущую тему, обсуждающую stopPropagation (). jasondavies опубликовал ответ на этот вопрос и пример здесь https://gist.github.com/jasondavies/3186840 .

В этом примере он использует:

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

Я не понимаю события " mousedown.журнал " и как он срабатывает в этом примере.

Вот полный код из примера jasondavies:

<!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>
1 2

1 ответ:

Это пространство имен для событий. Смотрите документацию:

Если прослушиватель событий уже зарегистрирован для того же типа в выбранном элементе, существующий прослушиватель удаляется до добавления нового прослушивателя. Чтобы зарегистрировать несколько прослушивателей для одного и того же типа событий, за типом может следовать необязательное пространство имен, например "click.фу " и " щелк.бар". Первая часть типа (например, "click") используется для регистрации прослушивателя событий (с помощью элемент.addEventListener ()) и методы добавляются к выбранным элементам как _ _ onclick.фу и _ _ онклик.бар. Чтобы удалить прослушиватель, передайте null в качестве прослушивателя. Чтобы удалить все прослушиватели для определенного типа событий, передайте null в качестве прослушивателя, и .тип как тип, например выбор.на(".foo", null).

В данном конкретном примере это означает, что оба обработчика вызываются при возникновении события mousedown. Без пространства имен второй обработчик будет перезаписывать первый.