在更改時不輸入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之后刪除了（）。