Question

中定义

我有一种情况，我有一个输入字段和输入事件附加到字段。

当我在此字段中写入，删除等时，事件会正确发出，我可以对此事件作出反应。

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.

Answer 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

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

1 个答案: