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

我创建了一个ID为的SVG元素。我希望在生成鼠标事件函数（例如，

mouseout

）后，通过其ID（

getElementById

）访问它，动态应用鼠标事件函数

我尝试了以下方法：

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

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

以及以下各项：

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

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

---

但是这些都不起作用。

第一个示例非常接近，但是有一些不同的问题阻止它按预期工作

首先，

onmouseout

属性需要分配一个包含一些JavaScript代码的字符串，而不是实际的JavaScript函数。您可以直接使用

addEventListener

方法而不是

setAttribute

方法分配JavaScript函数。这还允许同时应用多个事件处理程序

第二个问题是如何引用希望用作事件处理程序的函数。当您在函数名后写括号时，这意味着函数将在调用中直接执行，但实际上您要做的是将函数作为参数传递，以便以后可以调用它。最终调用函数的代码（在您的示例中，当用户将鼠标移出元素时，该函数本身就是SVG渲染器）将使用括号将一组参数传递到您提供的函数中

最后，事件处理函数具有非常特定的签名；即它所期望的参数集。它将被传递一个

事件

对象，该对象描述了所发生事件的一些详细信息

综上所述，我们可以对代码进行如下调整：

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

在中，您可以了解有关传递到事件处理程序的

事件

对象以及一般事件处理的更多信息。特别是，

mouseout

事件会将一个对象传递给事件处理程序

---

addEventListener

的额外

true

参数是事件处理工作原理的详细信息，如果您感兴趣，可以在中阅读。

您有任何迄今为止尝试共享的代码吗？有人帮我吗？亲爱的斯塔克！，请回答我的问题或向我展示一些有用的链接。（在我的回答中，我假设您使用的是JavaScript，因为您没有在问题中指定。）非常感谢，但您的回答不起作用。可能是因为我的脚本类型（）和处理svg元素。您能告诉我更多吗？此脚本运行在什么环境中？当您尝试我建议的代码时，是否有任何错误消息？还有什么能帮我猜出哪里出了问题吗？我假设这是一个标准的Web浏览器运行环境，有一个标准DOM接口，但是也许你的环境有所不同。如果我的回答帮助了他们，请考虑把它标记为你的接受答案。此外，如果您必须对我的答案进行一些额外的更改以使其生效，请让我知道，我将更新答案以包括它们，以帮助将来发现此问题的人。