如何在动态更改的选择上捕获事件答案

【问题标题】：How to capture events on dynamically changed selects如何在动态更改的选择上捕获事件
【发布时间】：2017-05-17 01:24:45
【问题描述】：

我有一个脚本，它创建一个span 来假定一个select 标记，然后隐藏select。这允许更简单的 CSS 样式，因为我可以更轻松地设置 span 的样式，相对于坚定的 select 标签。有了跨度，我有一个下拉列表，它是ul 标签，问题是，当我在“假选择”上选择一个值并使用 javascript 使隐藏的“真实”选择的值成为时，onchange 是未触发。这样做的目的是帮助想要样式选择的“非技术人员”，因此我想捕获他们添加到选择中的任何事件，例如 onchange、onfocus 和 onreset

例如在下面的代码中，如果手动选择选项，onchange 事件会被触发，而timeout 函数不会触发该事件

    <script>
        var select = document.getElementsByTagName('select')[0];

        function changed() {
            var select = document.getElementsByTagName('select')[0];
            select.value = 'that is optionification fam!';
        }

        setTimeout(changed, 1000);
    </script>
    <select onchange="alert('Object has changed!')">
        <option value="">Select an Option</option>
        <option>this is option</option>
        <option>that is optionification fam!</option>
        <option>these are options</option>
        <option>those a options</option>
        <option>I like options</option>
        <option>I don't like options</option>
        <option>this is an option</option>
    </select>

更新：

来自W3C：

由用户代理生成的事件，无论是作为用户交互的结果，还是作为对 DOM 更改的直接结果，都受到用户代理的信任，其权限是脚本通过DocumentEvent.createEvent("Event") 方法，使用 Event.initEvent() 方法修改，或通过 EventTarget.dispatchEvent() 方法调度。可信事件的 isTrusted 属性值为 true，而非可信事件的 isTrusted 属性值为 false。

大多数不受信任的事件不应触发默认操作，但 click 或 DOMActivate 事件除外。这些事件触发激活触发器的默认操作（有关更多详细信息，请参阅激活触发器和行为）；这些不受信任的事件的 isTrusted 属性值为 false，但仍会启动任何默认操作以实现向后兼容性。所有其他不受信任的事件必须表现得好像已对该事件调用了 Event.preventDefault() 方法。

由于isTrusted 也是一个只读属性，因此任何脚本更改都是“不可信的设置”...因此问题就来了！

谁能想到一个解决办法，我可以在哪里

创建“虚假”/人为事件响应
或使用用户输入更改选择的值**

【问题讨论】：

标签： javascript html timeout

【解决方案1】：

注意，起初<script> 块select 没有定义。使用window 的load 事件来定义select 元素。一种解决方法是使用Document.createEvent() 和"MouseEvents" 作为参数，MouseEvent.initMouseEvent()（已弃用）和"change" 作为第一个参数，true、true、window 作为下一个参数三个参数，EventTarget.dispatchEvent() 链接到在 window load 事件中定义的 select 变量以将 change 事件调度到 <select> 元素。

另见Trigger click on input=file on asynchronous ajax done()。

<script>
  function changed() {
    var select = document.getElementsByTagName("select")[0];
    select.value = "that is optionification fam!";
    alert("Object has changed!");
  }

  window.onload = function() {
    let evt = document.createEvent("MouseEvents");
    const select = document.getElementsByTagName("select")[0];
    evt.initMouseEvent("change", true, true, window);
    setTimeout(function() {
      select.dispatchEvent(evt);
    }, 3000);
  }
</script>
<select onchange="changed()">
  <option value="">Select an Option</option>
  <option>this is option</option>
  <option>that is optionification fam!</option>
  <option>these are options</option>
  <option>those a options</option>
  <option>I like options</option>
  <option>I don't like options</option>
  <option>this is an option</option>
</select>

在 chrome、firefox 6+、ie9+、opera 11+、safari 5.1+ (533.3) 上支持使用 CustomEvent； EventTarget.dispatchEvent().

<script>
  function changed() {
    var select = document.getElementsByTagName("select")[0];
    select.value = "that is optionification fam!";
    alert("Object has changed!");
  }

  window.onload = function() {
    let evt = new CustomEvent("change");
    const select = document.getElementsByTagName("select")[0];
    setTimeout(function() {
      select.dispatchEvent(evt);
    }, 3000);
  }
</script>
<select onchange="changed()">
  <option value="">Select an Option</option>
  <option>this is option</option>
  <option>that is optionification fam!</option>
  <option>these are options</option>
  <option>those a options</option>
  <option>I like options</option>
  <option>I don't like options</option>
  <option>this is an option</option>
</select>

【讨论】：