JavaScript의 고급 이벤트 처리 패턴

JavaScript 이벤트 처리는 동적 대화형 웹 애플리케이션 구축의 핵심입니다. 기본 이벤트 처리(예: addEventListener)는 간단하지만 고급 패턴을 통해 개발자는 성능을 최적화하고, 복잡한 사용자 상호 작용을 처리하고, 유지 관리하기 쉬운 코드를 작성할 수 있습니다.

이 기사에서는 JavaScript의 고급 이벤트 처리 패턴을 살펴보고 이벤트 처리 기술을 향상시킬 수 있는 실제 예를 제공합니다.

---

1. 행사위임

이벤트위임이란 무엇인가요?

이벤트 위임은 단일 이벤트 리스너를 상위 요소에 연결하여 해당 하위 요소에 대한 이벤트를 관리하는 것을 의미합니다. 이 모드는 페이지가 로드된 후 DOM에 동적으로 추가되는 요소에 특히 유용합니다.

예:

<code class="language-javascript">document.getElementById("parent").addEventListener("click", function(event) {
    if (event.target && event.target.matches(".child")) {
        console.log("点击了子元素：", event.target.textContent);
    }
});</code>

이벤트 위임을 사용하는 이유는 무엇인가요?

• 이벤트 리스너 수를 줄이고 성능을 향상시킵니다.
• 동적으로 추가된 요소의 관리를 단순화합니다.

---

2. 스로틀 및 흔들림 방지

무엇인가요?

• 제한지정된 간격 내에서 함수가 최대 한 번 실행되도록 합니다.
• 떨림 방지마지막 이벤트 이후 일정 시간이 경과할 때까지 기능 실행을 지연합니다.

예:

제한

<code class="language-javascript">function throttle(func, limit) {
    let lastCall = 0;
    return function(...args) {
        const now = Date.now();
        if (now - lastCall >= limit) {
            lastCall = now;
            func.apply(this, args);
        }
    };
}

window.addEventListener(
    "resize",
    throttle(() => {
        console.log("窗口大小已调整！");
    }, 200)
);</code>

흔들림 방지

<code class="language-javascript">function debounce(func, delay) {
    let timer;
    return function(...args) {
        clearTimeout(timer);
        timer = setTimeout(() => func.apply(this, args), delay);
    };
}

const searchInput = document.getElementById("search");
searchInput.addEventListener(
    "input",
    debounce(() => {
        console.log("输入事件触发！");
    }, 300)
);</code>

왜 사용하나요?

• 특히 크기 조정이나 스크롤과 같이 빈도가 높은 이벤트 중에 중복되는 함수 호출을 줄여 성능을 향상합니다.

---

3. 맞춤 이벤트 이미터

무엇인가요?

사용자 정의 이벤트 이미터를 사용하면 개발자가 모듈성을 높이기 위해 자체 이벤트를 생성, 전달 및 들을 수 있습니다.

<code class="language-javascript">const eventEmitter = {
    events: {},
    on(event, listener) {
        if (!this.events[event]) this.events[event] = [];
        this.events[event].push(listener);
    },
    emit(event, data) {
        if (this.events[event]) {
            this.events[event].forEach((listener) => listener(data));
        }
    },
};

eventEmitter.on("dataReceived", (data) => {
    console.log("收到数据：", data);
});

eventEmitter.emit("dataReceived", { id: 1, message: "Hello!" });</code>

왜 사용하나요?

• 향상된 모듈화 및 구성 요소 분리.
• 애플리케이션의 여러 부분 간의 커뮤니케이션을 촉진합니다.

---

4. 일회성 이벤트 처리

일회성 이벤트 처리란 무엇인가요?

한 번만 실행하기 위해 이벤트 핸들러가 필요한 경우도 있습니다. 최신 JavaScript는 이 문제를 처리하는 우아한 방법을 제공합니다.

예

<code class="language-javascript">const button = document.getElementById("myButton");

button.addEventListener(
    "click",
    () => {
        console.log("按钮被点击！");
    },
    { once: true }
);</code>

왜 사용하나요?

• 일회성 이벤트의 논리를 단순화합니다.
• 리스너를 자동으로 제거하여 메모리 누수를 방지하세요.

---

5. 이벤트 핸들러 조합

이벤트 핸들러 구성이란?

이벤트 핸들러 구성에는 이벤트를 순차적으로 처리하기 위해 여러 핸들러를 결합하는 작업이 포함됩니다.

예

<code class="language-javascript">function composeHandlers(...handlers) {
    return function(event) {
        handlers.forEach((handler) => handler(event));
    };
}

function logClick(event) {
    console.log("点击：", event.target);
}

function changeBackground(event) {
    event.target.style.backgroundColor = "yellow";
}

document.getElementById("myElement").addEventListener(
    "click",
    composeHandlers(logClick, changeBackground)
);</code>

왜 사용하나요?

• 핸들러를 작고 재사용 가능하게 유지하세요.
• 깨끗하고 유지 관리가 가능한 코드를 장려하세요.

---

6. 캡처 및 버블링

무엇인가요?

JavaScript 이벤트 흐름은 두 단계로 나뉩니다.

• 캡처 단계: 이벤트는 루트 요소에서 대상 요소로 흐릅니다.
• 버블링 단계: 이벤트는 대상 요소에서 루트 요소로 다시 흐릅니다.

예

<code class="language-javascript">document.getElementById("parent").addEventListener("click", function(event) {
    if (event.target && event.target.matches(".child")) {
        console.log("点击了子元素：", event.target.textContent);
    }
});</code>

왜 사용하나요?

• 이벤트 전파 관리에 유연성을 제공합니다.

---

7. 기본 동작 차단 및 전파 중지

무엇인가요?

• preventDefault() 기본 브라우저 작업(예: 양식 제출)을 방지합니다.
• stopPropagation() 이벤트가 다른 청취자에게 전파되는 것을 방지합니다.

예

<code class="language-javascript">function throttle(func, limit) {
    let lastCall = 0;
    return function(...args) {
        const now = Date.now();
        if (now - lastCall >= limit) {
            lastCall = now;
            func.apply(this, args);
        }
    };
}

window.addEventListener(
    "resize",
    throttle(() => {
        console.log("窗口大小已调整！");
    }, 200)
);</code>

왜 사용하나요?

• 이벤트 동작을 더욱 세밀하게 제어할 수 있습니다.

---

결론

고급 이벤트 처리 패턴은 효율적이고 대화형이며 유지 관리가 쉬운 JavaScript 애플리케이션을 구축하는 데 필수적입니다. 이벤트 위임, 제한, 사용자 지정 이미터, 전파 제어 등의 기술을 익히면 복잡한 사용 사례를 쉽게 처리할 수 있습니다.

위 내용은 JavaScript의 고급 이벤트 처리 패턴의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!