javascript - onload 事件处理程序是否在执行后自动释放？

Question

图片之类的onload事件在匿名时执行后是否释放？

就像你这样做的时候

var tempImg = new Image()
tempImg.onload = function () {
   alert("loaded");
}
tempImg.src = "https://images.google.ca/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";

或者这个

<img id='img' />
<script>    
    var tempImg = document.getElementById("img")
    tempImg.onload = function () {
       alert("loaded");
    }
    tempImg.src = "https://images.google.ca/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
</script>

是否必须以某种方式清除它以防止在其他地方更改图像时事件再次触发？如果是这样，正确的方法是什么？只是设置为undefined？你能自己清除它吗？

Answer 1

如果您使用 onload 属性分配事件监听器，那么<​​strong>不会自动释放。它可以在某些情况下再次触发，例如修改图像源。您可以通过将其设置为 undefined 或 null 或 delete 属性来清除它。这可以在事件处理函数本身内部完成:

image.onload = function(event) {
  delete image.onload;
  /* do something */
};

如果您正在使用 addEventListener() 来处理事件，您将需要使用 removeEventListener()。我们可以为函数添加一个内部名称，以便我们可以引用它:

image.addEventListener('load', function myLoadHandler(event) {
  image.removeEventListener(myLoadHandler);
  /* do something */
});

然而，在较新的浏览器中，有一个比这两个更好的选择。您可以使用新的 once 选项定义一个自动删除自身的事件监听器:

image.addEventListener('load', function(event) {
  /* do something */
}, { once: true });