드롭다운 구현에서 blur와 click 이벤트, 그리고 CSS transition의 영향..

드롭다운을 구현하는 중에

바깥을 클릭했을 때 드롭다운이 사라지게 하기 위해서(더 나은 UX..! 항상 사용자 입장에서 생각하기!!!)

'blur'라는 이벤트를 추가했다.

 

이렇게

const selectBox = document.querySelector('.select-box');
const dropbox = document.querySelector('.dropbox');
const dropboxOpt = document.querySelectorAll('li');
const OptText = document.querySelectorAll('.dropbox-opt');

selectBox.addEventListener('click',function (){
    dropbox.classList.toggle('on');
    selectBox.classList.toggle('polygon-up');
})

selectBox.addEventListener('blur', function(){
    dropbox.classList.remove('on');
    selectBox.classList.remove('polygon-up');
})

dropboxOpt.forEach(opt => {
    opt.addEventListener('click',function(e){
        const optTextTarget = e.currentTarget.textContent.trim();
        selectBox.textContent = optTextTarget;
    })
});

 

여기서 blur이벤트를 하는데 성공했지만

문제는 옵션을 선택했을 때 텍스트가 안바뀐다?!

 

rano.....

 

문제는 이벤트 실행 순서에 있었다!

https://stackoverflow.com/questions/39439115/how-to-execute-click-function-before-the-blur-function

How to execute click function before the blur function

바로 blur 이벤트가 click이벤트보다 먼저 일어남에 있었다.

아니 이벤트에도 순서가 있다고?!

 

바로 구글링해서 찾아보았다..!

https://codepen.io/mudassir0909/pen/qBjvzL

mousedown, mouseup, click & blur order

 

 

mousedown, mouseup, click, blur 가 끝나는(fired) 순서에 대한 이해가 필요했다.

실행되어 끝나는 순서는 다음과 같다.

 

mousedown(마우스 딸) -> blur(마우스 누르면서 이전에 focus 돼있었던 요소가 blur됨)

-> mouseup(칵) -> click(클릭 완)

 

이런 플로우가 있었던 것이었다!

 

그래서 바로 맨 밑의 click 이벤트를 다음과 같이 mousedown으로 수정했더니 해결 완료!

const selectBox = document.querySelector('.select-box');
const dropbox = document.querySelector('.dropbox');
const dropboxOpt = document.querySelectorAll('li');
const OptText = document.querySelectorAll('.dropbox-opt');

selectBox.addEventListener('click',function (){
    dropbox.classList.toggle('on');
    selectBox.classList.toggle('polygon-up');
})

selectBox.addEventListener('blur', function(){
    dropbox.classList.remove('on');
    selectBox.classList.remove('polygon-up');
})

dropboxOpt.forEach(opt => {
    opt.addEventListener('mousedown',function(e){
        const optTextTarget = e.currentTarget.textContent.trim();
        selectBox.textContent = optTextTarget;
    })
});

 

 

근데 여기서 드는 궁금증.

처음 적었던 코드는 김버그님의 강의를 참고하여 적은 코드인데,

왜 김버그님 코드는 왜 에러가 안나는 것일까?

 

그 원인은 바로 CSS 코드 안에 있었다.

김버그님의 dropdown css 에는 transition 2초가 걸려있었던 것..!

그래서 blur가 실행되는데 2초가 지연되었던 것이다.

 

이 부분에 대해 멘토님께서 추가적인 답변을 주셨는데,

속도를 조절하기 위해 css 프로퍼티를 사용할 수도 있다는 것...

 

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

CSS 트랜지션 사용하기 - CSS: Cascading Style Sheets | MDN

 

 

이제야 궁금증 해결~!