如何确保使用javascript更新select也会触发onchange事件侦听器?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何确保使用javascript更新select也会触发onchange事件侦听器?相关的知识,希望对你有一定的参考价值。
在html DOM中,元素对象具有许多模拟用户与元素交互的方法。
EG
.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,但是......事件监听器不会触发。
答案
为什么不摆脱匿名函数并使用一个好的老命名?
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);
以上是关于如何确保使用javascript更新select也会触发onchange事件侦听器?的主要内容,如果未能解决你的问题,请参考以下文章
使用 setTimeout 时,如何确保 Javascript 的“this”将引用该对象?