javascript - 使用哪个事件来添加选择中的选项？

Question

我想要的是带有 html select 元素的 onchange 事件。但显然更改事件是针对选择中的选项的。我需要检测何时添加新选项。

我搜索过谷歌和 SO以及其中的链接，但我不想使用任何框架。

我阅读了有关创建事件的内容，但我不明白如何使用创建的事件“onAdded”。就像 select.onAdded -> select 如何知道添加了某些内容(选项)？

或者有一个我忽略的更简单的方法吗？我错过了一个事件吗？

我的观点是，我想做这样的事情

var select = document.getElementById("slct");

var btn =  document.getElementById("btn");
btn.addEventListener("click", () => {
	var option = document.createElement("option");
	option.text = `${select.length} please work!`;
	select.add(option );
  //!!!select optionAdded event should have triggered!!!
})

function addPoint(){
  //do things
}

/*
select.addEventListener("optionAdded", addPoint);
or
onSelectValueCountChanged(appropriateFunctionHere);
*/

<form>
  <select id="slct" style="width: 300px" mutiple="true" size="11">  
  </select>
  
  <button type="button" id="btn">click
  </button>
  
</form>

这可能吗？以一种易于理解(我是 js 新手)的方式，无需任何框架？

Answer 1

您可以创建自定义事件并在 select 元素上触发它。这是我前一段时间使用的代码。它应该得到很好的支持，但现在不能告诉你具体的信息。

function triggerCustomEvent(element, eventType, eventProperties) {
  let event;

  // a cross-browser way to create an event object
  // don't know which branch is for which
  if (document.createEvent) {
    event = document.createEvent('HTMLEvents');
    event.initEvent(eventType, true, true);
  } else {
    event = document.createEventObject();
    event.eventType = eventType;
  }

  // also for being cross-browser
  event.eventName = eventType;

  // events are just objects, we can add properties to them, so we extend it
  // with our custom properties if any
  if (eventProperties && typeof eventProperties === "object") {
    for (var property in eventProperties) {
      event[property] = eventProperties[property];
    }
  } 

  // cross-browser way of firing the actual event object on the given element
  if (document.createEvent) {
    element.dispatchEvent(event);
  } else {
    element.fireEvent('on' + event.eventType, event);
  }
}

你可以像这样使用它

triggerCustomEvent(select, "onoptionadded", { options: opt });

如果您想向触发的事件对象添加一些属性，则第三个参数是可选的。

如果你想走这条路，你应该引入一个添加选项的方法，这样你就可以确保你总是触发这个事件。

function addOption(select, option) {
  select.add(option);
  triggerCustomEvent(select, "onoptionadded", { options: option });
}

请注意，该代码片段仅用于示例目的，尚未经过广泛测试，您不应该只是复制粘贴它。