对象数据加载的 removeEventListener答案

【问题标题】：removeEventListener for object data load对象数据加载的 removeEventListener
【发布时间】：2018-09-14 08:23:34
【问题描述】：

我添加了一个事件侦听器来捕获用户操作后 SVG 的加载。

HTML

<object id="mySVG" type="image/svg+xml" data="default.svg"></object>

mySVG = document.getElementById('mySVG');
mySVG.addEventListener('load', function () {
  // work with SVG contentDocument
});
mySVG.setAttribute('data', 'new.svg');

在另一个用户操作之后，我通过加载一个空白的内联 SVG 来清除 SVG

var svgUrl = URL.createObjectURL(new Blob(['<svg xmlns="http://www.w3.org/2000/svg" width="700" height="700"/>'], {'type':'image/svg+xml'}));
mySVG.setAttribute('data', svgUrl);

我看起来设置这个空白 SVG 也会触发加载事件，这是不可取的。所以我尝试了

mySVG.removeEventListener('load');

这给了我错误

TypeError：EventTarget.removeEventListener 的参数不足。

在这种情况下 removeEventListener 的正确语法是什么？

编辑：设置空白 SVG 的方法不正确，在阅读 this 后更正。

【问题讨论】：

您是否尝试查找文档以查看需要传递给removeEventListener 的内容？它可能会提供信息

标签： javascript svg addeventlistener dom-events

【解决方案1】：

您应该命名您的函数，然后将其作为第二个参数同时传递给addEventListener 和removeEventListener，如下所示：

mySVG = document.getElementById('mySVG');

function loadFunction() {
  // work with SVG contentDocument
}

mySVG.addEventListener('load', loadFunction);
mySVG.setAttribute('data', 'new.svg');

mySVG.setAttribute('data', 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22700%22%20height%3D%22700%22%2F%3E');


mySVG.removeEventListener('load', loadFunction);

&lt;object id="mySVG" type="image/svg+xml" data="default.svg"&gt;&lt;/object&gt;

removeEventListener 至少需要两个参数，事件类型 ('load') 和要移除的侦听器，因此您必须引用之前添加的侦听器才能将其移除。

【讨论】：

【解决方案2】：

mySVG.removeEventListener('load');应该有一个目标作为它监听事件的第二个参数

【讨论】：