javascript - 输入 addEventListener 发生更改时未触发

Question

我有一个输入来上传图像。

html

<main>
    <input id="hs-p" type="file" accept="image/*" capture="camera">
</main>

<script type="text/javascript">
    let hsp = new HPS();
</script>

我想监听此输入何时发生变化(当有人向其中添加图像时)。

js

let imageInput = null;

class HSP {       
    constructor() {

        this.imageInput = document.getElementById('hs-p');

        if (this.imageInput) {
            this.imageInput.addEventListener("change", this.uploadImage());
        }
   }

    uploadImage() {
        console.log("upload image", this.imageInput);
    }
}

module.exports = HSP;

当有人添加图像时，它应该调用 uploadImage 回调。但是，此函数仅在页面加载时触发一次，并且当我将图像添加到输入或更改输入图像时永远不会触发。

我使用 Node 和 webpack 输出上述自定义库/sdk，然后将其导入到我的 html 中。

Answer 1

将您的事件更改为:

this.imageInput.addEventListener("change", () => this.uploadImage());

或者这个:

this.imageInput.addEventListener("change", this.uploadImage.bind(this));

您正在做的是调用 uploadImage 并将结果传递给监听器。您想要将引用传递给监听器。