Question

我有一个脚本可以创建span来设定select标记，然后隐藏select。这样可以更轻松地进行CSS样式设置，因为相对于坚定的span标记，我可以更轻松地设置select的样式。使用span，我有一个ul标记的下拉列表，问题是，当我选择＆＃34;假选择＆＃34;并使用javascript使隐藏＆＃34;真实＆＃34;的值。选择，不会触发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（＆＃34; Event＆＃34;）方法，使用Event.initEvent（）方法修改，或通过EventTarget.dispatchEvent（）方法调度。受信任事件的isTrusted属性值为true，而不受信任事件的isTrusted属性值为false。

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

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

任何人都可以想到一个工作，我可以在哪里

创建＆＃34;假＆＃34; /人工事件回复
或使用用户输入**

Answer 1

注意，首先<script>块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>

使用chrome支持的CustomEvent，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>

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

1 个答案: