javascript - 如何捕获动态更改的选择上的事件

Question

我有一个脚本，它创建一个 span 来假定 select 标签，然后隐藏 select。这允许更简单的 CSS 样式设置，因为相对于坚定的 select 标记，我可以更轻松地设置 span 样式。使用跨度，我有一个下拉列表，它是 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 :

Events that are generated by the user agent, either as a result of user interaction, or as a direct result of changes to the DOM, are trusted by the user agent with privileges that are not afforded to events generated by script through the DocumentEvent.createEvent("Event") method, modified using the Event.initEvent() method, or dispatched via the EventTarget.dispatchEvent() method. The isTrusted attribute of trusted events has a value of true, while untrusted events have a isTrusted attribute value of false.

Most untrusted events should not trigger default actions, with the exception of click or DOMActivate events. These events trigger the default action of an activation trigger (see Activation triggers and behaviors for more details); these untrusted events have an isTrusted attribute value of false, but still initiate any default actions for backwards compatibility. All other untrusted events must behave as if the Event.preventDefault() method had been called on that event.

由于 isTrusted 也是一个只读属性，因此任何脚本化更改都是“一成不变的不可信”...这就是问题所在!

任何人都可以想到解决办法吗？我可以在哪里

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

Answer 1

注意，首先<script> block select没有定义。使用load事件window定义select元素。一种解决方法是使用 Document.createEvent() 与 "MouseEvents"作为参数， MouseEvent.initMouseEvent() (已弃用) "change"作为第一个参数，true , true , window作为接下来的三个参数， EventTarget.dispatchEvent() 链接到select window 中定义的变量load要调度的事件 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>

使用CustomEvent支持 chrome、firefox 6+、ie9+、opera 11+、safari 5.1+ (533.3)； 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>