如何解决 google 地图中的 addDomListener() 弃用问题

Question

当我打电话addDomListener或addDomListenerOnce：

const domNode = document.getElementById('...');
google.maps.event.addDomListener(domNode, "mouseover", () => { ... })

我不断收到以下控制台警告：

google.maps.event.addDomListener() is deprecated, use the standard addEventListener() method instead: 
https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener
The feature will continue to work and there is no plan to decommission it.

如何在addEventListener不破坏任何内容的情况下迁移到？

Answer 1

两者均已于2022addDomListener年4 月 7 日弃用，但它们addDomListenerOnce

\n

\n

\xe2\x80\xa6 将继续工作，并且没有计划停用它们。

\n

\n

如果您想消除警告，请按照下列步骤操作：

\n

addDomListener选择

\n

根据官方文档中的建议，您应该迁移到本机 DOM 的addEventListener.

\n

所以而不是：

\n

const domNode = document.querySelector(\'...\');\n\ngoogle.maps.event.addDomListener(domNode, \'mouseover\', (evt => {\n  // handle mouseover\n}));\n

\n

你会这样做：

\n

domNode.addEventListener(\'mouseover\', (evt => {\n // handle mouseover\n}));\n

\n

在这两种情况下，侦听器的evt参数都会继续实现DOMEvent接口——具体取决于事件类型。

\n

addDomListenerOnce选择

\n

与上面类似，但添加了once选项。所以而不是：

\n

google.maps.event.addDomListenerOnce(domNode, \'click\', (evt) => {\n  // handle clicks\n});\n

\n

你会这样做：

\n

domNode.addEventListener(\'click\',\n  (evt) => {\n    // handle clicks only once\n  },\n  { once: true }\n);\n

\n

返回类型已更改

\n

请注意，google 都addDomListener[Once]返回一个MapsEventListener.

\n

对于返回 的addEventListenerDOM来说，情况并非如此。void

\n

因此，如果您之前将侦听器存储在 \xe2\x80\x94 中，通常是为了稍后在 \xe2\x80\x94 上删除/分离它们，那么您需要以其他方式跟踪它们\xe2\x80\xa6 查看如何在 JavaScript 中删除事件监听器？或者让浏览器的垃圾收集器为您分离侦听器。

\n\n

提示：addEventListener还支持passive可以大大提高性能的选项。

\n