显示选择选项时的 JavaScript 事件？

Question

当 <select> 时会触发什么事件(如果有)元素显示/隐藏其 <options> 列表？

示例:

<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

当您用鼠标单击此选择框时，浏览器会显示选项列表。

但是，当您按 Tab 键进入选择框时，浏览器不会显示选项列表。

这是检查 select 元素内 mouseup 事件的唯一方法还是我遗漏了一些明显的东西？

$(document.body).on('mouseup', 'select', function(){            
    console.log('Either shown or hidden the options...but which?')
});

提前致谢。

附注我正在尝试将一个类添加到 <select>元素显示 <options> 时这样我就可以在浏览器显示“选项弹出框”时显示与不显示“选项弹出框”时不同的自定义插入符号样式。

Answer 1

这意味着选择元素处于焦点。所以在这种情况下你不需要 javascript。您可以使用 css 来满足此要求。

select:focus {
  color:red;
}

但是如果你确实想使用 jquery，它会看起来像这样:

$("select").focus(function(){
  console.log(" h1 ");
})

使用纯粹的 javascript，给你的选择一个 id="select"，你可以做这样的事情:

var x = document.getElementById("select");
x.addEventListener("focus", myFocusFunction, true);
x.addEventListener("blur", myBlurFunction, true);

function myFocusFunction() {
    document.getElementById("select").style.backgroundColor = "yellow"; 
}

function myBlurFunction() {
    document.getElementById("select").style.backgroundColor = ""; 
}