JavaScript 이벤트 위임 마스터하기-JS 튜토리얼-php.cn

최신 JavaScript 개발에서 이벤트 처리는 웹 애플리케이션을 대화형 및 동적으로 만드는 데 중요한 역할을 합니다. 애플리케이션이 성장함에 따라 이벤트 리스너 관리도 복잡해집니다. JavaScript의 이벤트 전파 시스템을 활용하여 이벤트 처리를 최적화하는 강력한 패턴인 이벤트 위임

을 만나보세요.

이벤트 위임이란 무엇입니까?

이벤트 위임은 단일 이벤트 리스너를 상위 요소에 연결하여 해당 하위 요소의 이벤트를 관리하는 기술입니다. 모든 어린이에게 개별 청취자를 추가하는 대신 부모는 버블링된 이벤트를 캡처하고 상호 작용의 소스를 식별합니다.

어떻게 작동하나요?

이벤트 위임은 두 가지 주요 JavaScript 메커니즘을 사용합니다.

이벤트 버블링: 이벤트는 대상 요소에서 DOM 트리의 루트까지 전파됩니다.
event.target: 이벤트의 원래 요소를 식별합니다.

이벤트 위임의 장점

Feature	Explanation
Performance	Reduces the number of event listeners, saving memory and improving efficiency.
Control Mechanism	Automatically manages dynamically added elements without additional listeners.
Memory Handling	Centralized event handling logic in fewer places in the code.
Common Use Cases	Supported universally across modern browsers.

이벤트 전파에 대한 심층 분석

JavaScript 이벤트는 DOM을 통해 예측 가능한 수명 주기를 따릅니다. 위임을 익히려면 이러한 단계를 이해하는 것이 중요합니다.

1.캡처 단계: 이벤트는 루트에서 시작하여 대상 요소까지 이동합니다.
2.대상 단계: 대상 요소에서 이벤트가 활성화됩니다.
3.버블 단계: 이벤트가 루트까지 다시 전파됩니다.

이벤트 위임은 주로 버블 단계에서 작동합니다.

코드 예제: 실제 이벤트 위임

시나리오 1: 목록의 클릭 이벤트 관리
각 목록 항목에 리스너를 추가하는 대신:

const ul = document.querySelector("ul");
ul.addEventListener("click", (event) => {
    if (event.target.tagName === "LI") {
        console.log("Clicked item:", event.target.textContent);
    }
});

로그인 후 복사

이 단일 리스너는 동적으로 추가된 요소를 포함하여 모든 li 요소를 관리합니다.

const ul = document.querySelector("ul");
ul.innerHTML += "<li>New Item</li>"; // No new listener required.

로그인 후 복사

시나리오 2: 여러 이벤트 유형 위임
이벤트 위임과 이벤트 유형 확인 결합:

document.querySelector("#container").addEventListener("click", (event) => {
    if (event.target.matches(".button")) {
        console.log("Button clicked");
    } else if (event.target.matches(".link")) {
        console.log("Link clicked");
    }
});

로그인 후 복사

시나리오 3: 위임을 통한 양식 처리

document.querySelector("#form").addEventListener("input", (event) => {
    if (event.target.matches("input[name='email']")) {
        console.log("Email updated:", event.target.value);
    } else if (event.target.matches("input[name='password']")) {
        console.log("Password updated.");
    }
});

로그인 후 복사

이 접근 방식을 사용하면 동적으로 추가된 모든 새 입력 필드가 자동으로 처리됩니다.

이벤트 위임에 대한 모범 사례

1. 특정 선택기 사용: 의도하지 않은 동작을 방지하려면 확장검색을 피하세요. event.target.matches() 또는 event.target.closest()를 사용하세요.
2. 과도한 위임 방지: 부모에게 너무 많은 이벤트를 위임하는 것은 부모에 자식이 많은 경우 비효율적일 수 있습니다.
3. 조건부 논리 최적화: 불필요한 검사를 최소화하도록 조건을 구성하세요.
4. 조절 또는 디바운스 이벤트: 스크롤이나 크기 조정과 같은 이벤트의 경우 조절을 사용하여 성능을 향상합니다.

function throttle(callback, delay) {
    let lastTime = 0;
    return function (...args) {
        const now = Date.now();
        if (now - lastTime >= delay) {
            callback(...args);
            lastTime = now;
        }
    };
}
document.addEventListener("scroll", throttle(() => console.log("Scrolled!"), 200));

로그인 후 복사

이벤트 위임과 직접 이벤트 처리

Aspect	Direct Event Handling	Event Delegation
Setup Complexity	Requires multiple listeners.	Single listener handles multiple events.
Dynamic Elements	Requires manual re-attachment.	Automatically supported.
Performance in Large DOM	Degrades as the number of listeners grows.	Efficient with a centralized listener.
Maintainability	Scattered logic across multiple places.	Centralized and clean.

측면 직접 이벤트 처리 이벤트 위임 설정 복잡성 여러 리스너가 필요합니다. 단일 리스너가 여러 이벤트를 처리합니다. 동적 요소 수동으로 다시 연결해야 합니다. 자동으로 지원됩니다. 대규모 DOM에서의 성능 청취자 수가 증가함에 따라 성능이 저하됩니다. 중앙 집중식 리스너를 사용하면 효율적입니다. 유지관리성 여러 장소에 분산된 논리. 중앙 집중식이며 깔끔합니다.

프레임워크의 이벤트 위임

반응
React가 DOM 조작을 추상화하는 동안 합성 이벤트에서 위임과 동등한 것을 볼 수 있습니다. React는 단일 루트 리스너를 사용하여 가상 DOM의 모든 이벤트를 관리합니다.

jQuery
jQuery의 .on() 메서드는 위임을 단순화합니다.

const ul = document.querySelector("ul");
ul.addEventListener("click", (event) => {
    if (event.target.tagName === "LI") {
        console.log("Clicked item:", event.target.textContent);
    }
});

로그인 후 복사

이벤트 위임의 일반적인 함정

1.우발적인 경기
선택기가 관련 없는 요소와 실수로 일치하지 않도록 하세요. 특정 선택기 또는 event.target.closest()를 사용하세요.

2.이벤트 버블링 방지
경우에 따라 특정 요소에 대한 버블링을 중지해야 할 수도 있습니다.

const ul = document.querySelector("ul");
ul.innerHTML += "<li>New Item</li>"; // No new listener required.

로그인 후 복사

성능 고려 사항

1.벤치마크
이벤트 위임은 대규모 DOM에서 메모리 사용량을 줄이지만 상위 항목이 너무 많은 이벤트를 처리하는 경우 지연 시간이 발생할 수 있습니다.

2.DevTools
브라우저 개발자 도구를 사용하여 연결된 리스너를 분석합니다(Chrome 콘솔의 getEventListeners):

document.querySelector("#container").addEventListener("click", (event) => {
    if (event.target.matches(".button")) {
        console.log("Button clicked");
    } else if (event.target.matches(".link")) {
        console.log("Link clicked");
    }
});

로그인 후 복사

팁과 요령

비버블링 이벤트에서 위임 시뮬레이션: 초점 및 흐림과 같은 일부 이벤트는 버블링되지 않습니다. 대신 focusin 및 focusout을 사용하십시오.

document.querySelector("#form").addEventListener("input", (event) => {
    if (event.target.matches("input[name='email']")) {
        console.log("Email updated:", event.target.value);
    } else if (event.target.matches("input[name='password']")) {
        console.log("Password updated.");
    }
});

로그인 후 복사

루트 수준에서 위임 연결: SPA 또는 동적 콘텐츠의 유연성을 극대화하려면 문서에 리스너를 연결하세요.

결론

JavaScript 이벤트 위임은 대화형 애플리케이션에 맞게 효율적으로 확장되는 핵심 최적화 전략입니다. 이벤트 처리를 중앙 집중화하고, 메모리 사용량을 줄이고, 유지 관리성을 개선함으로써 개발자가 강력하고 성능이 뛰어난 웹 애플리케이션을 구축할 수 있도록 지원합니다.

내 웹사이트: https://shafayet.zya.me

당신을 위한 밈(공감할 만한...)??

Mastering JavaScript Event Delegation