https://joodb.github.io/dropdown-selectbox/
HTML
문제. <select>, <option>이 아니다.
- 처음 구현할 때 당연히 <select>, <option>을 사용했을거라 예상하고 그렇게 만들어갔는데 전혀 아니었다. 중간에 저 margin으로 들어가야하는 부분이 구현되지 않는다. select와 option사이는 떨어트릴 수 없다. 이 부분을 몰라서 HTML만 두 번 만들었다.
해결. 최애프로그래밍 언어 부분은 <button>, 아래 리스트는 <ul>로 만들고 <li> > <button>으로 만들었다.
JS
처음에 만든 코드에서는 list 영역을 for문을 이용해 <button>하나하나에 접근했다.
// selectBtn focus를 잃었을 때 list를 숨기고 삼각형 이미지의 각도를 원래대로 변경한다.
selectBtn.addEventListener('blur', () => {
contentsOption.classList.add('hide');
document.documentElement.style.setProperty('--toggle-degree', '0deg');
});
for (const i of options) {
i.addEventListener("mousedown",(e)=>{
selectBtn.textContent = e.target.textContent;
contentsOption.classList.add("hide");
document.documentElement.style.setProperty('--toggle-degree', '0deg');
document.getElementById('hiddenSelectOption').value = e.target.value;
});
}
문제. 영역 바깥을 선택하면 리스트가 닫히지 않는다.
- options는 <li>안에있는 <button>하나하나를 접근하는 반복문이다.
처음에는 click 이벤트를 주었는데 값이 넘어가기전에 리스트가 닫혀 버리는 상황이 반복 됐다.
해결1. click 대신 mousedown 을 쓰자
이벤트가 발생하는 순서는 아래와 같다.
- mousedown
- blur
- mouse up
- click
순서에 따라 blur가 click이벤트보다 먼저 실행되기때문에 for문이 실행되기전 먼저 리스트가 숨겨지는것이다. 혹시나 저 순서가 차이가 있을까 의심될 수 도 있지만 for문이 위에 있다고해도 똑같이 실행되지 않았다. 그렇기에 blur보다 먼저 발생하는 mousedown을 쓰면 이 문제가 해결된다.
// list가 선택되면 selectBtn에 내용을 보여주고 리스트를 숨긴다.
contentsOption.addEventListener('mousedown', (e) => {
if(e.target.nodeName === "BUTTON") {
selectBtn.textContent = e.target.textContent;
contentsOption.classList.add("hide");
document.documentElement.style.setProperty('--toggle-degree', '0deg');
document.getElementById('hiddenSelectOption').value = e.target.value;
}
});
문제 2. 버튼을 눌렀는데 닫힌다!
- 기존에는 <button>에 mousedown이벤트를 줬더니 문제1과 동일하게 값이 넘어가지않고 닫힌다.
해결 2. 이벤트를 줄 영역을 <button>이 아닌 <ul>로 변경하자
- <button>의 text는 nodeName 조건으로 BUTTON이 맞을 때만 실행될 것들을 넣어주었다.
이번 과제를 통해 알게 된 것
💡 이벤트 발생 순서로 인해 원하는 이벤트가 발생되지 않을 수 있다.
💡 영역을 값이 들어간 부분 이외에도 더 크게 잡고 조건으로 값을 넘길 수 있다.
'TIL' 카테고리의 다른 글
발표 절대 못 한다던 내가 첫 연사를 마친 소감 (0) | 2022.06.09 |
---|---|
TIL 34 :: 캡처링? 버블링? (0) | 2022.05.17 |
TIL 30 :: JS 함수는 하나인데 이름은 3개(기본, 화살표, 익명) (0) | 2022.05.10 |
TIL 29 :: [JS] 반복문 (0) | 2022.05.09 |
TIL 26 :: [JS] Boolean Type (0) | 2022.05.02 |