디바운스와 스로틀

scroll, resize, input, mousemove 같은 이벤트는 짧은 시간 간격으로 연속해서 발생한다. 이러한 이벤트에 바인딩한 이벤트 핸들러는 과도하게 호출되어 성능에 문제를 일으킬 수 있다. 디바운스와 스로틀은 짧은 시간 간격으로 연속해서 발생하는 이벤트를 그룹화해서 과도한 이벤트 핸들러의 호출을 방지하는 프로그래밍 기법이다.다음 예제의 버튼을 짧은 시간 간격으로 연속해서 클릭했을 때 일반적인 이벤트 핸들러와 디바운스, 스로틀된 이벤트 핸들러의 호출 빈도가 어떻게 다른지 살펴보자! click me 일반 클릭 이벤트 카운터 0 디바운스 클릭 이벤트 카운터 0 스로틀 클릭 이벤트 카운터 0 일반적인 이벤트 핸들러'click me' 버튼을 누를때마다 카운..

• format_list_bulleted HTML
• · 2024. 8. 7.
• textsms

이벤트를 간편하게 걸고 싶은 당신을 위한 ”이벤트 버블링,캡처링, 위임”

여러분은 여러개의 버튼을 반복문을 통해 만들었고, 각 버튼에 이벤트를 추가해야한다면 어떤 방식을 사용하시나요?일일히 쿼리를 querySelector로 가져와 이벤트를 추가하시는 분이 있으시다면 이 글을 본 뒤 한번 적용해 보시면 좋을것 같습니다.이벤트를 등록하는 법이벤트에 반응하기 위해선 이벤트가 발생했을 때 실행되는 함수 핸들러(handler)를 할당해야 합니다.my buttonvar button = document.querySelector('button');button.addEventListener('click', (event) => { console.log(event);});우리는 위의 예시와 같은 코드를 통해 버튼을 만들고, 그 버튼을 클릭했을때 어떤 동작을 할 지 정할 수 있습니다. 이때 브라우..

• format_list_bulleted HTML
• · 2024. 8. 7.
• textsms

contentEditable에 placeholder 적용하기(흉내내기)

contentEditable에서 placeholder를 적용하려면..위의 코드와 같은 방식으로 작성했을때 과연 아래의 사진과 같은 결과가 나올까요?직접 해봤다면 원하는대로 적용이 되지않음을 알 수 있습니다.placeholder는 input이나 textarea 태그인 경우에만 사용할 수 있습니다.따라서 ContentEditable은 엘리먼트를 input처럼 편집할 수 있지만 placeholder 어트리뷰트는 적용할 수 없음을 알 수 있습니다. 그렇다면 placeholder를 사용할 수 있는 방법은 없는걸까요..?😭가능합니다!가상클래스를 이용한 방법으로 placeholder인것 처럼 동작할 수 있게 만들 수 있는데 방법은 아래와 같습니다.:empty : 자식, 텍스트가 없는 요소 선택:before : 의사..

• format_list_bulleted 개발괴발
• · 2024. 8. 6.
• textsms