javascript - 如何确保使用 javascript 更新选择也会触发 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>始终更改回选项 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);