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

Question

我有一个脚本，它创建了一个span来假定select标记，然后隐藏select。这允许更容易的CSS样式，因为相对于固定的select标签，我可以更容易地对span进行样式设置。对于跨度，我有一个下拉列表，它是ul标记。问题是，当我在"；假选择"；并使用javascript使该值为hidden"真实的"；选择，则不触发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，而不受信任的事件的isTrust属性值为false。

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

由于isTrusted也是只读属性，任何脚本化的更改都是"不可信的"。。。因此问题来了！

有人能想到一个工作周围，在哪里，我可以

• 创建"假的"/人工事件响应
• 或者使用用户输入更改select的值**

Answer 1

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

另请参阅异步ajax done()上的触发器点击input=file。

<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，firefox6+，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>