如何為樣式選擇添加“更改”事件偵聽器？

Question

顯然，如果我有一個 'select' 元素，我可以使用一些基本的 JS 為更改添加一個事件偵聽器：

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

單擊“選擇”元素，修改值，日志觸發。 簡單的東西。

但是我工作的一個庫風格的選擇框-像選擇或選擇2沒有jQuery的依賴性。

在我的庫中，單擊樣式選擇框會更改實際選擇框的.value ：

query('select').value = newValue;

如果我使真正的選擇框可見，我可以看到這是有效的。

但是，通過 JS 更改選擇框的value不會觸發select框的“更改”事件。

有沒有辦法可以通過 JS 更改選擇框的值，並且仍然將change事件附加到選擇框觸發？

Answer 1

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');
}

演示

Answer 2

只是一個想法：更改值后自行觸發事件：

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

Answer 3

基於@Hamix 的出色回答，以及MDN 關於 createEvent() 過時的一些建議，我最終選擇了：

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

這是一個演示- 再次基於@Hamix 的 jsfiddle 所以去給他一個贊成票。