JavaScript Onload属性

Question

我已经阅读了一些有关onload属性的文章。我的理解是，它不是方法，不是事件，事件侦听器或触发器。它只是指向要分配的函数的空指针。这是一个缩短的脚本。它根据事件分配图像处理功能，然后将图像渲染到网页。而不是将函数分配给函数的指针onload。为什么我不能直接执行功能？我在这里有意义吗？谢谢

var reader = new FileReader();

reader.onload = function(e) {
    var img = document.createElement("img");
    img.src = e.target.result;

    var canvas = document.createElement("canvas");

    ......

    dataurl = canvas.toDataURL(file.type);
    document.getElementById('output').src = dataurl;
}
reader.readAsDataURL(file);

Answer 1

据MDN：

FileReader.onload属性包含一个事件处理程序，该事件处理程序在当使用readAsArrayBuffer读取内容时，将触发load事件。readAsBinaryString，readAsDataURL或readAsText可用。

因此执行了[[之后读取内容已完成，您正在通过调用reader.readAsDataURL(file)来执行。

Answer 2

onload是对象FileReader的字段，该字段处理对要在加载所需文件时执行的功能的引用。本质上，触发事件load时将调用回调。为什么使用此模式而不直接执行功能？因为加载文件是一个异步任务（使用readAsDataURL，readAsBinaryString，readAsArrayBuffer或readAsText初始化）。

Answer 3

您不能直接调用该函数，因为文件是异步加载的。您可以将FileReader代码转换为返回一个Promise，然后可以使用async / await使代码看起来像直接调用它一样。

funciton readFileAsDataURL(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(e.target.result);
    reader.onerror = reject;
    reader.readAsDataURL(file);
  };
}

function loadImage(url) {
  return new Promise((resolve, reject) => {
    const img = new Image():
    img.onload = () => resolve(img);
    img.onerror = reject;
    img.src = url;
  };
}

async function foo() {
  const result = await readFileAsDataURL(file);
  const img = await loadImage(result);
  // you can now use img
  ......
}

Answer 4

因此，从本质上讲，OnLoad是FileReader的事件处理程序（或对事件处理程序的引用），当FileReader完成加载后，它被调用以进一步处理数据吗？我的解释正确吗？