Javascript 在选择中使用哪个事件添加和选项？

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

我已经搜索了google和其中的链接，但我不想使用任何框架

我阅读了创建事件的相关内容，但不知道如何使用创建的事件“onAdded”。像select.onAdded->select如何知道添加了什么（选项）

还是有一种更简单的方法让我看得过火？我错过的一件事

我的意思是，我想做这样的事情

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

var select=document.getElementById（“slct”）；
var btn=document.getElementById（“btn”）；
btn.addEventListener（“单击”，（）=>{
var option=document.createElement（“选项”）；
option.text=`${select.length}请工作！`；
选择。添加（选项）；
//！！！选择选项应已触发添加事件！！！
})
函数addPoint（）{
//做事
}
/*
选择.addEventListener（“optionAdded”，addPoint）；
或
onSelectValueCountChanged（此处为适当的函数）；
*/

点击

您可以创建一个自定义事件，并在

选择元素上触发它。这是我不久前使用的代码。它应该得到很好的支持，但现在无法告诉您关于这方面的确切信息

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

请注意，代码片段仅用于示例目的，它没有经过广泛测试，您不应该只是复制粘贴它。
您可以创建一个自定义事件并在
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 });
}

请注意，代码片段仅用于示例目的，它没有经过广泛测试，您不应该只是复制粘贴它。
您需要为此创建自己的自定义事件。以下是基本内容：


//获取对select的引用
var lst=document.getElementById（“lstStuff”）；
//创建新事件
var事件=新事件（“可选添加”）；
//倾听事件。
lst.addEventListener（'optionAdded'，函数（e）{
log（“触发了“+e.type+”事件”）；
log（“添加了新选项！”）；
}，假）；
//现在，在适当的时候触发事件
var opt=document.createElement（“选项”）；
opt.textContent=“选择4”；
一、儿童（opt）；
第一次调度事件（事件）；


选择1
选择2
选择3
您需要为此创建自己的自定义事件。以下是基本内容：


//获取对select的引用
var lst=document.getElementById（“lstStuff”）；
//创建新事件
var事件=新事件（“可选添加”）；
//倾听事件。
lst.addEventListener（'optionAdded'，函数（e）{
log（“触发了“+e.type+”事件”）；
log（“添加了新选项！”）；
}，假）；
//现在，在适当的时候触发事件
var opt=document.createElement（“选项”）；
opt.textContent=“选择4”；
一、儿童（opt）；
第一次调度事件（事件）；


选择1
选择2
选择3
所以我在浏览javascript书籍时找到了我想要的东西

这就是神奇之处：


var select=document.getElementById（“slct”）；
var btn=document.getElementById（“btn”）；
btn.addEventListener（“单击”，（）=>{
var option=document.createElement（“选项”）；
option.text=`${select.length}有效！`；
选择。添加（选项）；
//！！！选择选项应已触发添加事件！！！
});
select.addEventListener（“域节点插入”（（）=>{
警惕（“Pow！”）；
});

点击
所以我在浏览javascript书籍时找到了我想要的东西

这就是神奇之处：


var select=document.getElementById（“slct”）；
var btn=document.getElementById（“btn”）；
btn.addEventListener（“单击”，（）=>{
var option=document.createElement（“选项”）；
option.text=`${select.length}有效！`；
选择。添加（选项）；
//！！！选择选项应已触发添加事件！！！
});
select.addEventListener（“域节点插入”（（）=>{
警惕（“Pow！”）；
});

点击
当前如何添加选项？单击按钮。从文本输入获取一个值。然后，将使用text.value创建一个选项并将其附加到select中。如果您自己添加这些选项，您是否已经拥有该事件？创建并附加选项后，为什么不直接调用侦听器将要执行的函数呢？我想他可能会想要一个干净的、基于事件的代码，也可以在其他地方重用。我认为最好将这些关注点分开。@zoltaánTamási说了什么。当前如何添加选项？点击按钮。从文本输入获取一个值。然后，将使用text.value创建一个选项并将其附加到select中。如果您自己添加这些选项，您是否已经拥有该事件？创建并附加选项后，为什么不直接调用侦听器将要执行的函数呢？我想他可能会想要一个干净的、基于事件的代码，也可以在其他地方重用。我认为最好将这些关注点分开。我想这就是我想要的。然而，似乎大家一致认为我应该在添加选项后实现addPoint函数。它完成同样的任务。我想添加一些其他的c