Ввод 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).