개발하는 일상

한 줄 요약 select 태그를 커스텀하게 만들고 싶다면 div 태그에 tabIndex="0" 속성을 주고, blur 이벤트리스너를 활용해보자 여러 옵션 중 하나를 선택할 수 있게 해주는 HTML 태그가 있다. select 태그인데, 내부 운영용 툴을 만들다가 이 태그를 쓰게 되었다. select 태그를 쓰게 되면 디폴트로 아래 그림1와 같은 디자인이 따라온다. 이 디자인은 css로 바꿀 수 없다는 것이 문제였다. 아무리 내부용 툴이지만 이렇게 만들고 싶진 않아서, div 태그로 직접 select 태그를 구현하기로 했다. 적절한 style과 클릭 이벤트리스너를 달아서 아래 그림2와 같은 태그를 만들었다. div 태그로 select 태그를 흉내내면서 생긴 하나의 문제가 있었다. select 태그는 선택지를..

어떤 요소의 이벤트리스너를 딱 한 번만 발동시키고 싶다면 어떻게 해야 할까요? addEventListner와 removeEventListner를 적절히 사용해야 되겠죠? 크게 3가지로 나눠 방법을 소개하겠습니다. 1. 함수에 이름 붙여 사용하기 function onClickFunction(){ eventTarget.removeEventListener('click', onClickFunction) alert('event has been removed') } eventTarget.addEventListener('click', onClickFunction) removeEventListener에 함수 이름이 인자로 필요하기 때문에 따로 선언하여 제거하는 모습입니다. 좀 더 간편한 방법은 없을까요? 2. once..