Question

更改隐藏输入时，我必须获取其值。但是我的听众没有工作。

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

选择器正确。我在浏览器控制台中che了一下。事件“输入”也不起作用

Answer 1

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

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

由于它是隐藏的输入，因此JavaScript是更改输入值的唯一方法。

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

This question covers that。

Answer 2

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

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

<input type="hidden" id="city_lat"/>

Answer 3

当值更改时，您可以使用EventTarget.dispatchEvent()来触发事件：

在指定的Event上调度EventTarget，以适当的顺序（同步）调用受影响的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>

Answer 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);

<input id="city_lat" type="hidden" value="0">

Answer 5

当用户不输入内容时，更改事件将如何触发，当您使用js或jquery进行修改时，它将不会触发该事件。如果您提供要执行的操作，则有人可以告诉您您确实需要执行的操作。

为什么输入事件在隐藏输入类型的情况下不起作用？

5 个答案: