Javascript의 이벤트 위임

12454 단어 100daysofcode eventdriven javascript codenewbie

안녕하세요 코더 여러분!! 이 기사에서는 Javascript에서 Event Delegation의 중요한 개념에 대해 설명합니다.

소개

대부분의 경우 웹 페이지에 이벤트를 추가해야 하므로 웹 페이지 성능을 개선하기 위해 이벤트 핸들러를 처리하는 멋진 기술을 제공하는 이벤트 위임을 사용합니다.

이벤트 위임은 웹 페이지에서 더 나은 방식으로 이벤트를 처리하는 기술입니다. 이벤트가 DOM 트리의 계층 구조까지 전파되는 방식 때문에 가능합니다.

이벤트 위임은 이벤트 버블링에 따라 다릅니다. 이 시리즈의 이전 기사에서 자세한 내용을 읽을 수 있습니다.

이제 이러한 개념에 대해 자세히 살펴보겠습니다.

이벤트 위임

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

아이디어는 유사한 방식으로 처리되는 많은 요소가 있는 경우 각 요소에 처리기를 할당하는 대신 공통 조상에 단일 처리기를 배치한다는 것입니다.

예를 들어 이해해 봅시다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul id="category">
        <li id="books">Books</li>
        <li id="camera">Camera</li>
        <li id="sports">Sports</li>
    </ul>

    <script src="index.js"></script>

</body>

</html>

위의 코드 스니펫에서는 사용자가 li 요소를 클릭할 때마다 몇 가지 특정 작업을 수행하려고 합니다. 콘솔에 특정li 요소를 인쇄하고 싶다고 가정해 보겠습니다.

이를 수행하는 한 가지 방법은 아래 코드 스니펫과 같이 각 li 요소에 이벤트 리스너를 연결하는 것입니다.

document.querySelector('#books').addEventListener('click', (e)=>{
    console.log(e.target.id);
})

document.querySelector('#camera').addEventListener('click', (e)=>{
    console.log(e.target.id);
})

document.querySelector('#sports').addEventListener('click', (e)=>{
    console.log(e.target.id);
})

이미 알고 있듯이 이 기능을 구현하는 데 최적화된 방법은 아닙니다. 앞으로 더 많은li 요소가 추가되어 더 많은 코드를 추가하고 규칙을 위반할 가능성이 있습니다. 반복하지 마십시오.

이벤트 위임을 사용하여 동일한 것을 구현하는 방법을 살펴보겠습니다.

document.querySelector('#category').addEventListener('click', (e) => {
    if (e.target.tagName == 'LI') {
        console.log(e.target.id);
    }
})

위의 코드 스니펫에서 핸들러를 각 li 요소에 연결하는 대신 공통 상위 요소ul에 단일 핸들러를 배치하고 이벤트 버블링 개념을 사용하여 동일한 기능을 구현합니다.

"행동" 패턴

또한 이벤트 위임을 사용하여 특수 속성 및 클래스를 사용하여 선언적으로 요소에 "동작"을 추가할 수 있습니다.

패턴에는 두 부분이 있습니다.

동작을 설명하는 요소에 사용자 정의 속성을 추가합니다.

문서 전체 핸들러는 이벤트를 추적하고 특성이 있는 요소에서 이벤트가 발생하면 작업을 수행합니다.

이제 다음 예를 살펴보십시오.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="operation">
        <input type="text" value="10" data-action="increase">
        <input type="text" value="10" data-action="decrease">
    </div>

    <script src="index.js"></script>

</body>
</html>

예를 들어 여기 속성data-action은 입력에 "클릭 시 값 증가/감소"동작을 추가합니다.

document.querySelector('#operation').addEventListener('click', (e) => {
    let action = e.target.dataset.action;
    switch (action) {
        case "increase":
            e.target.value++;
            break;
        case "decrease":
            e.target.value--;
            break;
    }
})