创建SVG元素鼠标事件后添加SVG元素鼠标事件

Question

我已经创建了一个带有ID的SVG元素。我想动态应用鼠标事件函数(例如mouseout)后，它的生成，通过访问它的id (getElementById)。

我已经试过了:

svgDocument.getElementById(selectedId).setAttribute(
   'onmouseout', DeselectedPointMouseOut(selectedId)
);

和以下内容:

svgDocument.getElementById(selectedId).onmouseout(function());

Answer 1

你在第一个例子中非常接近，但是有一些不同的问题阻止它像你期望的那样工作。

首先，onmouseout属性期望被分配一个包含一些JavaScript代码的字符串，而不是一个实际的JavaScript函数。您可以直接使用addEventListener方法而不是setAttribute方法来分配JavaScript函数。这也允许同时应用多个事件处理程序。

第二个问题是您如何引用您希望用作事件处理程序的函数。当你在函数名后面写圆括号时，这意味着函数将在你的调用中执行，但你真正想做的是传递函数作为参数，以便以后可以调用。最终调用函数的代码(在您的示例中，当用户将鼠标移出元素时，将是SVG呈现器本身)将使用括号将一组参数传递给您提供的函数。

最后，事件处理函数有一个非常具体的签名;也就是说，它所期望的参数集。它将被传递一个Event对象，该对象描述了所发生事件的一些细节。

把这些放在一起，我们可以调整代码如下:

// First define the event handler function.
function deselectedPointMouseOut(event) {
    // do your event handling in here
}
// Now attach the event handler to the element.
svgDocument.getElementById(selectedId).addEventListener(
    "mouseout", deselectedPointMouseOut, true
);

您可以在关于Event的MDN文章中了解更多关于传递给事件处理程序的Event对象以及一般的事件处理的信息。特别是，mouseout事件导致将MouseEvent对象传递给事件处理程序。

addEventListener的额外true参数是事件处理如何工作的细节，如果您感兴趣，可以在此方法的文档中阅读。