为什么手动更改输入值无法发出输入事件?

时间:2017-10-23 09:40:59

标签: javascript

代码在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
});

我的目标是重置值charsCounter而不在charsCounter模块中进行整合,因为在我提交表单的那一刻,charsCounter不会重置为0.

1 个答案:

答案 0 :(得分:1)

在本地,正如@Temani Afif在评论中所述,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

有关详细信息,请访问MDN - Creating and triggering Events