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

Question

我写了一个简单的脚本来计算在表单中输入的单词数我的问题是为什么在输入时更改 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>

Answer 1

您可以在您的输入上发送更改事件。请检查示例 (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>

Answer 2

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

    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>

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

Javascript change value but inside onchange event listener not firing

javascript

dom-events