javascript - addEventListener (经典 dom svg-elment) 和 .on (at d3js) 之间的区别在哪里

Question

我遇到了 context-event 及其参数的问题。

我的网站使用以下版本来附加事件:

此方法用于简单的图形元素，这些元素在从数据库加载后获取事件:

        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)
        );

根据某些情况，我稍后会在这些“符号”上附加一些事件:

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;
}

如果我按以下方式记录事件参数，我会得到 undefined上onGraphicContext以及 symbolRightClick 上的完整 MouseEvent 对象

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

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

这里有什么区别？不是 d3.js- .on -属性与 addEventListener 相同？

谢谢卡斯滕

Answer 1

selection.on() 是 D3 方法，而不是 native 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])

因此，对于 D3 程序员来说，selection.on() 比仅使用普通 addEventListener 更方便。