addEventListener 함수 분리하기

    document.querySelectorAll('.toggle').forEach($el => $el.addEventListener('click', function ({target}) {
        let $liTarget = target.closest('li'), $divTarget = target.closest('div');
        if ($el.checked === true) {
            $liTarget.setAttribute('class','completed');
            getUserIdAndItemComplete(document.querySelector('#user-list > .active').innerHTML, $el.parentNode.children[1].innerText)
        } else {
            $liTarget.setAttribute('class','active');
            //Completed를 True를 False로 하는 방법을 몰라서 해당 할일을 삭제하고 다시만들어 "isCompleted":False 상태로 만든다.
            getUserIdAndDeleteTodolist(document.querySelector('#user-list > .active').innerHTML, $el.parentNode.children[1].innerText);
            getUserIdAndAddTodolist(document.querySelector('#user-list > .active').innerHTML, $el.parentNode.children[1].innerText);
        }
    }))

이와 같은 코드가 있다.
이를 addEventListener의 함수를 분리하려 한다.

function clickCheckboxButton(){
    // 체크박스 클릭시 li태그에 class속성 추가 및 text에 중간작대기 생성 (클릭 취소하면 class속성 completed 추가 및 text원래대로)
    // 체크박스 클릭 혹은 클릭 취소 시  localStorage 속성도 변화시킨다.
    document.querySelectorAll('.toggle').forEach($el => $el.addEventListener('click', clickCheckboxHandler))
}

function clickCheckboxHandler({target}) {
    let $liTarget = target.closest('li'), $divTarget = target.closest('div');
    if ($el.checked === true) {
        $liTarget.setAttribute('class','completed');
        getUserIdAndItemComplete(document.querySelector('#user-list > .active').innerHTML, $el.parentNode.children[1].innerText)
    } else {
        $liTarget.setAttribute('class','active');
        //Completed를 True를 False로 하는 방법을 몰라서 해당 할일을 삭제하고 다시만들어 "isCompleted":False 상태로 만든다.
        getUserIdAndDeleteTodolist(document.querySelector('#user-list > .active').innerHTML, $el.parentNode.children[1].innerText);
        getUserIdAndAddTodolist(document.querySelector('#user-list > .active').innerHTML, $el.parentNode.children[1].innerText);
    }
}

문제점 : clickCheckboxHandler에서 $el을 사용할 수가없다.

해결 방법

function clickCheckboxButton(){
    // 체크박스 클릭시 li태그에 class속성 추가 및 text에 중간작대기 생성 (클릭 취소하면 class속성 completed 추가 및 text원래대로)
    // 체크박스 클릭 혹은 클릭 취소 시  localStorage 속성도 변화시킨다.
    document.querySelectorAll('.toggle').forEach($el => $el.addEventListener('click', (e)=>clickCheckboxHandler(e,$el)))
}

function clickCheckboxHandler({target},$el) {
    let $liTarget = target.closest('li'), $divTarget = target.closest('div');
    if ($el.checked === true) {
        $liTarget.setAttribute('class','completed');
        getUserIdAndItemComplete(document.querySelector('#user-list > .active').innerHTML, $el.parentNode.children[1].innerText)
    } else {
        $liTarget.setAttribute('class','active');
        //Completed를 True를 False로 하는 방법을 몰라서 해당 할일을 삭제하고 다시만들어 "isCompleted":False 상태로 만든다.
        getUserIdAndDeleteTodolist(document.querySelector('#user-list > .active').innerHTML, $el.parentNode.children[1].innerText);
        getUserIdAndAddTodolist(document.querySelector('#user-list > .active').innerHTML, $el.parentNode.children[1].innerText);
    }
}

이와 같이 해당 매개변수 함수 부분에 (e)=>clickCheckboxHandler(e,$el)형태로 바꾸어 필요한 $el을 사용할 수 있도록 만든다.