在更改时不输入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并将其结果传递给侦听器。 您要将引用传递给侦听器。

Answer 2

更改this.imageInput.addEventListener("change", this.uploadImage()); 到this.imageInput.addEventListener("change", this.uploadImage); （在this.uploadImage之后删除了（）。