Javascript：更新<select>值时触发'change'事件监听器

Question

注意：不使用 jQuery，在将其标记为重复之前，请确保其他 Q/A 是纯 JS。

我这样设置我的事件侦听器，当通过 html:

触发时效果很好

document.getElementById('activitySelector').addEventListener('change', function() {
  console.log("I work triggered by html but not js")
}

我正在添加额外的功能，我通过 javascript 更改 select 值，其工作原理是 html 更新，但永远不会触发 eventListener：

document.getElementById("activitySelector").value = interactiveType

Answer 1

要实现您想要的效果，您应该手动创建事件并调度它。这并不难，正如您在此处看到的那样：http://www.2ality.com/2013/06/triggering-events.html?m=1

Answer 2

这是我的初步解决方案。只需让事件处理程序触发您的代码包装为函数即可。这样你就可以在通过 javascript.

更新时调用相同的函数

正如@dfsq 指出的那样，这就是它的工作原理。手动触发事件可能需要比此方法更多的代码：

// All code originally in eventListener now in function
function onActivityChange() {
  console.log("I work triggered by html and js")
}

// Call above function from eventlistener
document.getElementById('activitySelector').addEventListener('change', onActivityChange)

// Trigger same function after updating value
document.getElementById("activitySelector").value = interactiveType
onActivityChange()

Javascript：更新<select>值时触发'change'事件监听器

Javascript: Trigger 'change' eventlistener when updating <select> value

javascript

event-listener