JavaScript 옵션을 선택하면 표시됩니까?

Question

<select> 요소가 <options>의 목록을 표시하거나 숨길 때 어떤 이벤트가 발생하면 트리거됩니까?

예 :이 선택 상자에 마우스로 클릭하면

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

브라우저 옵션의 목록을 보여줍니다.

그러나 선택 상자에 들어가면 브라우저에 옵션 목록이 표시되지 않습니다.

select 요소 내에서 mouseup 이벤트를 확인하는 유일한 방법입니까, 아니면 확실하지 않은 것이 있습니까?

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

미리 감사드립니다.

P. 나는 <select> 요소에 클래스를 추가하려 할 때 <options>을 보여 주므로 브라우저가 "옵션 팝업"을 표시 할 때 다른 맞춤 캐럿 스타일을 표시 할 수 있습니다.

Answer 1

즉, select 요소에 포커스가있는 것입니다. 따라서이 시나리오에서는 자바 스크립트가 필요하지 않습니다. 당신은 CSS를 사용하여 이것을 수용 할 수 있습니다. 이 같은

select:focus { 
    color:red; 
} 

하지만 jQuery를 사용하려는 않은 경우가 보일 것이다 무언가 : 순수 자바 스크립트 사용

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

, 당신의 선택 ID를 부여 = "선택"당신이 이런 일을 할 수있는 :

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 = ""; 
}