Question

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

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

我读到了创建活动但我不了解如何使用创建的活动＆＃34; onAdded＆＃34;。喜欢select.onAdded - ＆gt;如何选择知道某事（一个选项）？

还是有一种比我看起来更简单的方法吗？我错过了一个事件？

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

＆＃13;

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);
*/

＆＃13;

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

＆＃13;

有可能吗？在没有任何框架的情况下易于理解（我是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 });
}

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

Answer 2

您需要为此创建自己的自定义事件。以下是基础知识：

// Get a reference to the select
var lst = document.getElementById("lstStuff");

// Create the new event
var event = new Event('optionAdded');

// Listen for the event.
lst.addEventListener('optionAdded', function (e) {
   console.log("The " + e.type + " event fired.");
   console.log("New option added!");  
}, false);


  // Now, you trigger the event when appropriate
  var opt = document.createElement("option");
  opt.textContent = "Choice 4";
  lst.appendChild(opt);  
  lst.dispatchEvent(event);

<select id="lstStuff">
  <option>Choice 1</option>
  <option>Choice 2</option>
  <option>Choice 3</option>
</select>

Answer 3

所以我在浏览javascript书时找到了我正在寻找的内容！

这是魔术：

＆＃13;

var select = document.getElementById("slct");

var btn =  document.getElementById("btn");
btn.addEventListener("click", () => {
	var option = document.createElement("option");
	option.text = `${select.length} It works!`;
	select.add(option );
  //!!!select optionAdded event should have triggered!!!
});

select.addEventListener("DOMNodeInserted", () => {
	alert("Pow!");
});

＆＃13;

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

＆＃13;

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

3 个答案: