Javascript 如何添加'；改变'；样式化select的事件侦听器？

显然，如果我有一个“select”元素，我可以使用一些基本的JS为更改添加一个事件侦听器：

document.querySelector('select').addEventListener('change', function(ev){
  console.log('Changed', ev.target.value)
})

单击“选择”元素，修改值，日志将激发。简单的东西

不过，我正在为样式化的选择框（如selected或select2）开发一个库，它没有jQuery依赖项

在“我的库”中，单击样式化的选择框可更改真实选择框的

.value

：

query('select').value = newValue;

如果我使真正的选择框可见，我可以看到这是可行的

但是，通过JS更改选择框的

值

，不会触发

选择

框的“更改”事件

---

是否有一种方法可以通过JS更改选择框的值，并且仍然将

更改

事件附加到选择框火灾？

只是一个想法：更改值后自己触发事件：

var el = query('select');
el.value = newValue;
el.dispatchEvent(new Event('change'));

---

Javascript

function fireEvent(element, event) {
    if (document.createEventObject) {
        // dispatch for IE
        var evt = document.createEventObject();
        return element.fireEvent('on' + event, evt)
    } else {
        // dispatch for firefox + others
        var evt = document.createEvent("HTMLEvents");
        evt.initEvent(event, true, true); // event type,bubbling,cancelable
        return !element.dispatchEvent(evt);
    }
}

document.querySelector('select').addEventListener('change', function (ev) {
    console.log('Changed', ev.target.value)
});

btn.onclick = function () {
    select.selectedIndex = 2;
    var obj = document.querySelector('select');
    fireEvent(obj, 'change');
}

用户呼叫

var yourPlugin=new CustomSelect(options);
yourPlugin.value("3");

插件函数

function value(val) {
    if (!val) return select.value;
    select.value = val;
    fireEvent(select, 'change');
}

---

基于@Hamix出色的回答，我最终选择了：

var changeEvent = new Event('change');
realSelect.dispatchEvent(changeEvent);

---

-同样基于@Hamix的JSFIDLE，所以去给他一个投票。

这当然是可能的，但该库是为其他人设计的，我不想要求用户添加其他事件处理程序-我只想在更改样式选择时启动现有处理程序的选择框。尝试复制您的选择框时，我得到：

TypeError:EventTarget.dispatchEvent的参数1不是对象。

Try:

realSelect.dispatchEvent（changeEvent）（无名称参数）@马丁内斯特：你是对的，我已经改变了我的代码（并将其移动到一个单独的答案，以便人们能够看到）。谢谢，这正是我想要的。我稍微调整了一下JSFIDLE，创建了一个使用事件构造函数的JSFIDLE（MDN认为document.createEvent已经过时）。谢谢你的帮助！这真的很简单。祝你好运