如何确保使用javascript更新select也会触发onchange事件监听器？

Question

在HTML DOM中，元素对象具有许多模拟用户与元素交互的方法。

例如

• .click()
• .focus()
• .blur()

如果给定元素具有附加的onclick事件侦听器：

myElement.addEventListener('click', myFunction, false);

然后可以使用javascript触发该事件监听器：

myElement.click();

但是，如果有问题的元素是什么一个<option>在<select> ，并在事件监听器<select>是：

mySelect.addEventListener('change', myFunction, false);

该事件监听器如何触发？

完整示例：

 var boxes = document.getElementsByClassName('box'); var clickBox = boxes[0]; var hoverBoxForClickBox = boxes[1]; var hoverBoxForSelect = boxes[2]; var select = document.getElementsByTagName('select')[0]; var options = select.getElementsByTagName('option'); function updateOption() { for (var i = 0; i < options.length; i++) { if (options[i].selected === true) { options[i].removeAttribute('selected'); } } options[1].selected = true; } clickBox.addEventListener('click', function(){console.log('Clickbox has been clicked');}, false); hoverBoxForClickBox.addEventListener('mouseover', function(){clickBox.click();}, false); select.addEventListener('change', function(){console.log(select.value + ' has been selected');}, false); hoverBoxForSelect.addEventListener('mouseover', updateOption, false); 

 .box { display: inline-block; width: 100px; height: 100px; color: rgb(255, 255, 255); font-weight: bold; line-height: 100px; text-align: center; font-family: arial, helvetica, sans-serif; cursor: pointer; } .clickbox { background-color: rgb(255, 0, 0); } .hoverbox { background-color: rgb(0, 0, 255); } select { margin-right: 36px; } 

 <div class="box clickbox">Click Me</div> <div class="box hoverbox">Hover Me</div> <select> <option value="option-1">Option 1</option> <option value="option-2">Option 2</option> <option value="option-3">Option 3</option> <option value="option-4">Option 4</option> <option value="option-5">Option 5</option> </select> <div class="box hoverbox">Hover Me</div> 

您可以看到，当将第二个鼠标悬停在上方时， <option>始终会变回Option 2 ，但是...事件监听器不会触发。

Answer 1

为什么不摆脱匿名函数并使用一个好的旧命名函数呢？

https://jsfiddle.net/4terzna8/

片段：

function onChangeSelect(){
    console.log(select.value + ' has been selected');
}

function updateOption() {
 for (var i = 0; i < options.length; i++) {
    if (options[i].selected === true) {
        options[i].removeAttribute('selected');
    }
 }

 options[1].selected = true;

 onChangeSelect();
}
select.addEventListener('change', onChangeSelect, false);