我添加了一个事件监听器以在用户操作后捕获 SVG 的加载。
HTML
<object id="mySVG" type="image/svg+xml" data="default.svg"></object>
JS
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: Not enough arguments to EventTarget.removeEventListener.
在此上下文中,removeEventListener 的正确语法是什么?
编辑:设置空白 SVG 的方法不正确,阅读后更正 this .
最佳答案
您应该命名您的函数,然后将其作为第二个参数传递给 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);
<object id="mySVG" type="image/svg+xml" data="default.svg"></object>
removeEventListener
需要至少两个参数,事件类型 ('load'
) 和要删除的监听器,因此您必须引用之前添加的监听器它已被删除。
关于javascript - 用于对象数据加载的 removeEventListener,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52327838/