手動で入力値を変更しても入力イベントを発行できないのはなぜですか？

Question

コードはattachment

で定義されています。入力フィールドと入力イベントがフィールドに関連付けられている状況があります。

私はこのフィールドからの書き込みや削除などの際に、適切にイベントが送信され、このイベントに反応することができます。

input.addEventListener('input',() => { 
    changeCounterValue(charsCounter, input); 
}); 

しかし、私は入力をフォームに送信すると入力の値をリセットしますが、実際には入力イベントは発生しません。

document.querySelector('form').addEventListener('submit', (e) => { 
    e.preventDefault(); 
    input.value = ""; 
    // I don't want to integrate here with charsCounter module, to reset his value to 0 
}); 

私がフォームを送信する際@Temani Afifが述べたように、この瞬間に、charsCounterは、0

Answer 1

ネイティブにリセットされませんので、私の目標は、charsCounterモジュールにintegreatingせずに値charsCounterをリセットすることですコメントでは、inputイベントはJavascriptからの変更によってトリガーされません。代わりに、あなたはあなたの価値を再設定した後、あなた自身でそれを発送しなければなりません。このように要素を作成します。

var inputEvent = new Event('input', { 
    view: window, 
    bubbles: true, 
    cancelable: true 
}); 

そして、このようなあなたのsubmitのEventListenerでそれをトリガー：さらなる情報については

document.querySelector('form').addEventListener('submit', (e) => { 
    e.preventDefault(); 
    input.value = ""; 
    // I don't want to integrate here with charsCounter module, to reset his value to 0 
    input.dispatchEvent(inputEvent); 
}); 

JSFiddle

、JSと訪問MDN - Creating and triggering Events