在更改未触发时输入 addEventListener答案

【问题标题】：Input addEventListener on change not firing在更改未触发时输入 addEventListener
【发布时间】：2018-11-13 22:24:00
【问题描述】：

我只有一个输入来上传图片。

html

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

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

我想听听这个输入何时发生变化（当有人向它添加图像时）。

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 中。

【问题讨论】：

标签： javascript html node.js webpack addeventlistener

【解决方案1】：

将您的活动更改为：

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

或者到这个：

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

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

【讨论】：

太好了，我不敢相信我忘记了这一点。谢谢！

【解决方案2】：

将 this.imageInput.addEventListener("change", this.uploadImage()); 更改为 this.imageInput.addEventListener("change", this.uploadImage);（删除 this.uploadImage 之后的 ()）。

【讨论】：