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函数。这也将允许同时应用多个事件处理程序。

第二个问题是您如何引用要用作事件处理程序的函数。当你在函数名后写括号时，这意味着函数将在你的调用中执行，但你真正想做的是传递函数作为参数，以便可以调用它< EM>后。它将是最终调用您的函数的代码（在您的情况下将是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
);

您可以在the MDN article on Event中详细了解传递到事件处理程序中的Event对象以及事件处理。特别是，mouseout事件会导致MouseEvent对象传入事件处理程序。

对true的额外addEventListener参数详细说明了如果您感兴趣，可以在the documentation for this method中了解事件处理的工作原理。

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

1 个答案: