为什么输入事件不能与隐藏的输入类型一起使用？答案

【问题标题】：Why input event not working with input type hidden?为什么输入事件不能与隐藏的输入类型一起使用？
【发布时间】：2019-02-01 10:05:51
【问题描述】：

当隐藏输入改变时，我必须得到它的值。但我的听众不工作。

const citySelector = document.querySelector('#city_lat');
citySelector.addEventListener('change', function () {
   alert('changed');
});

选择器是正确的。我已经检查了浏览器控制台。事件“输入”也不起作用

【问题讨论】：

请也提供 HTML，以便我们运行它并查看您描述的行为。
stackoverflow.com/questions/16250464/…的可能重复
onchange 事件仅在用户更改输入或使用 $('#city_lat').trigger('change') 之类的代码在代码中触发时才起作用。隐藏的输入不能被用户更改，所以默认不会触发更改事件。
How do I programmatically force an onchange event on an input?的可能重复

标签： javascript

【解决方案1】：

当用户更改输入值时，会触发更改事件。用户输入数据时触发输入事件。

如果您使用 JavaScript 更改输入的值，它们不会触发。

因为它是一个隐藏的输入，JavaScript 是唯一可以改变输入值的方法。

如果您想在代码更改值时触发事件处理程序，那么您还需要使用代码触发事件。

This question covers that.

【讨论】：

【解决方案2】：

如果您希望隐藏字段触发事件，那么我假设您需要编程解决方案（这是实现此目的的唯一方法）。以下是执行此操作的解决方案。

 
 const citySelector = document.querySelector('#city_lat');
        citySelector.addEventListener('change', function () {
            alert('changed');
        });
        
       citySelector.value="Changed Value";
       citySelector.dispatchEvent(new Event('change'));

&lt;input type="hidden" id="city_lat"/&gt;

【讨论】：

【解决方案3】：

您可以使用EventTarget.dispatchEvent()在值发生变化时触发事件：

在指定的EventTarget 处分派Event，（同步）以适当的顺序调用受影响的EventListeners。正常的事件处理规则（包括捕获和可选的冒泡阶段）也适用于使用 dispatchEvent() 手动调度的事件。

试试下面的方法：

var citySelector = document.getElementById('city_lat');

citySelector.addEventListener('change', function () {
    alert('changed');
});
citySelector.value ='London';
citySelector.dispatchEvent(new Event('change'));

<select id="city_lat" hidden>
  <option value="">Select</option>
  <option value="London">London</option>
  <option value="New York">New York</option>
</select>

【讨论】：

【解决方案4】：

您可以重新定义输入的 value 属性。然后观察变化：

var targetNode = document.getElementById('city_lat');

Object.defineProperty(targetNode, "value", {
    set:  function (t) {
        console.log('value of hidden field changed!');
        targetNode.setAttribute('value',t)
    },
    get:function(){
        return targetNode.getAttribute('value');
    }
});


// Testing ...
window.setTimeout(function(){
   // changing the value to 12
   targetNode.value="12";
   console.log(targetNode.value);
},2000);

&lt;input id="city_lat" type="hidden" value="0"&gt;

【讨论】：

【解决方案5】：

当用户没有输入内容时，如何触发更改事件，当您使用 js 或 jquery 进行修改时，它不会触发该事件。如果你提供了你想要做的事情，有人可以告诉你究竟需要做什么。

【讨论】：