728x90 반응형 SMALL javascript16 [js] Event Delegation 부모 요소에 이벤트 리스터를설정하고 이벤트 버블링을 활용하여 자식 요소들에서 발생하는 이벤트를 처리하는 기업많은 자식 요소 각각에 이벤트 리스터를 설정하지 않아도 되어 성능과 메모리 효율성을 높이는데 도움이 됨 * 버블링 : DOM 이벤트 흐름의 한 부분으로, 이벤트가 발생했을 때 그 이벤트가 가장 깊은 요소에서 시작하여 상위 요소로 전파되는 현상. 이를 통해 최상위 요소에 도달할 때까지 이벤트가 계층적으로 전파됨.// parent 요소에 클릭 이벤트 리스너를 추가// 이벤트가 parent 자식 요소에서 발생하면 이벤트가 버블링되어 parent 요소에도 전달됨 Item 1 Item 2 Item 3document.getElementById("parent").addEventListener(".. 2024. 8. 6. [js] transitionend transitionend 이벤트는 css 트랜지션(transition) 애니메이션이 완료되었을 때 발생한다. 이 이벤트는 특정 요소의 트랜지션이 끝난 후에 실행할 작업을 지정하는 데 사용된다. 이를 통해 애니메이션이 완료된 시점을 정확히 감지할 수 있다. $("#collapse-sidebar").on("click", function () { var sidebarMenu = $("#sidebar-menu"); sidebarMenu.toggleClass("collapsed"); if (sidebarMenu.hasClass("collapsed")) { // 사이드바가 접힐 때 아이템의 visible 상태를 hidden으로 설정 sidebarMenu.find(".nav.. 2024. 8. 6. [js] 페이징 컨트롤러 별도 배치 테이블 높이에 따라 페이징 컨트롤러의 위치가 변경되는 것을 방지하기 위해 페이징 컨트롤러를 별도로 배치 html 그룹 코드 코드명 비고 사용여부 순서 등록 갱신 등록일시 등록자 .. 2024. 7. 29. [js] Debouncing Debouncing은 특정 이벤트가 연속적으로 발생할 때, 마지막 이벤트가 발생한 후 일정 시간이 지나기 전까지는 해당 이벤트 핸들러가 실행되지 않도록 하는 기법.주요 목적은 자주 발생하는 이벤트를 제어하여 성능을 최적화하고, 불필요한 함수 호출을 줄이는 것 function debounce(func, wait) { let timeout; return function(...args) { const context = this; clearTimeout(timeout); timeout = setTimeout(() => func.apply(context, args), wait); };}// Debouncing을 사용해야 하는 상황 - 연속된 입력 필드 입력, .. 2024. 7. 29. 이전 1 2 3 4 다음 728x90 반응형 LIST
