Javascript更改值但内部onchange事件侦听器未触发答案

【问题标题】：Javascript change value but inside onchange event listener not firingJavascript更改值但内部onchange事件侦听器未触发
【发布时间】：2021-11-30 16:36:03
【问题描述】：

我写了一个简单的脚本来在输入表单时计算单词我的问题是为什么在输入时更改word_count 字段的值； word_count 的 EventListener 没有被触发

document.getElementById('subject').addEventListener('change', function() {
    var string = this.value
    string = string.replace(/\s+/g, " ");
    var words = string.split(/\s+/).length;
    document.getElementById('word_count').value = words;
}, false);
document.getElementById('subject').addEventListener('keypress', function() {
    var string = this.value
    string = string.replace(/\s+/g, " ");
    var words = string.split(/\s+/).length;
    document.getElementById('word_count').value = words;
}, false);
document.getElementById('word_count').addEventListener('change', function() {
    alert('change fired');
}, false);

<form>
   <div> <label for="story">string:</label>
      <textarea   id="subject" name="subject"></textarea>
   </div>
   <div>  <label for="story">count:</label>
      <input id="word_count">
   </div>
</form>

【问题讨论】：

this 有帮助吗？

标签： javascript dom-events

【解决方案1】：

试试这个（结果见控制台）：

    var old_count;

document.getElementById('subject').addEventListener('change', function() {
    var string = this.value
    string = string.replace(/\s+/g, " ");
    var words = string.split(/\s+/).length;
    document.getElementById('word_count').value = words;
    if(!old_count)old_count=words
    else{
    if(old_count!=words){
    old_count=words
    document.getElementById('word_count').dispatchEvent(new Event('change'));   
    }
    }

// Dispatch/Trigger/Fire the event
    document.getElementById('word_count').dispatchEvent(new Event('change'));

}, false);
document.getElementById('subject').addEventListener('keypress', function() {
    var string = this.value
    string = string.replace(/\s+/g, " ");
    var words = string.split(/\s+/).length;
    document.getElementById('word_count').value = words;
    if(!old_count)old_count=words
    else{
    if(old_count!=words){
    old_count=words
    document.getElementById('word_count').dispatchEvent(new Event('change'));   
    }
    }

}, false);
document.getElementById('word_count').addEventListener('change', function() {
    console.log('change fired:'+ old_count);
}, false);

<form>
   <div> <label for="story">string:</label>
      <textarea   id="subject" name="subject"></textarea>
   </div>
   <div>  <label for="story">count:</label>
      <input id="word_count">
   </div>
</form>

【讨论】：

【解决方案2】：

您可以在您的输入上发送一个更改事件。请查看示例（https://codepen.io/alekskorovin/pen/dyVyepg）：

document.getElementById('subject').addEventListener('change', function() {
    var string = this.value
    string = string.replace(/\s+/g, " ");
    var words = string.split(/\s+/).length;
    document.getElementById('word_count').value = words;
}, false);
document.getElementById('subject').addEventListener('keypress', function() {
    var string = this.value
    string = string.replace(/\s+/g, " ");
    var words = string.split(/\s+/).length;
    document.getElementById('word_count').value = words;
    const event = new Event('change'); document.getElementById('word_count').dispatchEvent(event);
}, false);
document.getElementById('word_count').addEventListener('change', function() {
    alert('change fired');
}, false);

<form>
   <div> <label for="story">string:</label>
      <textarea   id="subject" name="subject"></textarea>
   </div>
   <div>  <label for="story">count:</label>
      <input id="word_count">
   </div>
</form>

【讨论】：

谢谢；但你的回答对我没有帮助我希望它只用新词而不是每次按键都触发
您可以轻松添加在事件调度之前是否出现新单词的检查