addEventListener（经典dom svg-elment）和.on（在d3js）之间的区别在哪里

Question

我遇到了上下文事件及其参数的问题。

以下版本在我的站点中使用，以附加事件：

此方法用于从数据库加载后获取事件的简单图形元素：

        const graph = editor.append("g")
        .attr("id", "a" + graphic.Id.toString())
        .html(graphic.SvgString)
        .on("mouseover", graphicMouseOver)
        .on("mouseout", graphicMouseOut)
        .on("mousedown", graphicMouseDown)
        .on("contextmenu", onGraphicContext)
        .call(d3.drag()
            .on("start", graphicDragStart)
            .on("drag", graphicDragging)
            .on("end", graphicDragEnd));

然后我对某种符号有不同的方法，加载到我的编辑器：

        const g = editor.append("g")
        .attr("transform", "translate(" + symbol.SymbolPosition + ")")
        .attr("id", subFunctionId.toString())
        .attr("class", "draggable preview")
        .attr("pointer-events", "fill")
        .call(d3.drag()
            .on("start", symbolDragStart)
            .on("drag", symbolDragging)
            .on("end", symbolDragEnd)
        );

根据某些情况，我稍后将一些事件附加到这些 "symbols"：

function addSymbolEvents(svgSymbols) {
log.debug("addSymbolEvents");
for (var i = 0; i < svgSymbols.length; i++) {
    svgSymbols[i].addEventListener('mouseenter', symbolMouseEnter);
    svgSymbols[i].addEventListener('mouseover', symbolMouseOver);
    svgSymbols[i].addEventListener('mouseout', symbolMouseOut);

    svgSymbols[i].addEventListener('pointerdown', symbolMouseDown);
    svgSymbols[i].addEventListener('dblclick', symbolDblClick);
    svgSymbols[i].addEventListener('contextmenu', symbolRightClick);
}
return svgSymbols;
}

如果我按以下方式记录事件参数，我会在 onGraphicContext 上获得 undefined 并在 symbolRightClick

上获得完整的 MouseEvent 对象

function onGraphicContext(evt) {
    console.log("onGraphicContext", evt);
}

function symbolRightClick(evt) {
    console.log("symbolRightClick", evt);
}

这里有什么区别？ d3.js-.on-属性不是和addEventListener一样吗？

谢谢卡斯滕

Answer 1

好的，我找到了解决方案。

正如@Teemu 所写，这显然是不一样的。所以如果你使用.on("contextmenu", onGraphicContext)，你需要在事件函数中使用d3.event-对象：

function onGraphicContext() {
    console.log("onGraphicContext", d3.event);
}

Answer 2

selection.on() 是 D3 方法，不是原生的 JavaScript。在内部，selection.on() 使用 addEventListener，如您在 source code 中所见。

然而，selection.on() 不仅仅是 addEventListener 的包装器。正如 API 所说，当您使用 selection.on() 附加监听器时，该监听器...

...will be evaluated for the element, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element (nodes[i])

正因为如此，selection.on() 对于 D3 程序员来说比仅使用香草 addEventListener.

更方便

addEventListener（经典dom svg-elment）和.on（在d3js）之间的区别在哪里

Where is the difference between addEventListener (classic dom svg-elment) and .on (at d3js)

javascript

event-handling

d3.js