[jQuery] 이벤트 핸들러 이해하기

1. 오류상황

function onChangeTab() {
    console.log("Tab changed!");
}

$container.on('click', '.subheader > .sub-nav > .btn', onChangeTab());
// "Tab changed!"는 이벤트가 발생하기 전에 이미 실행됨
// 이후, 이벤트 발생 시 아무 일도 일어나지 않음

 

• 설명: 이 코드에서는 onChangeTab() 함수를 즉시 실행하고, 그 결과 값을 on() 메서드에 전달하려고 합니다.
• 결과: onChangeTab()이 실행된 후, 그 함수의 반환값이 on() 메서드에 전달됩니다.                                                                 만약 onChangeTab()이 어떤 값을 반환하지 않으면, undefined가 이벤트 핸들러로 설정됩니다.

 

 

2. 정상동작

function onChangeTab() {
    console.log("Tab changed!");
}

$container.on('click', '.subheader > .sub-nav > .btn', onChangeTab);
// 이벤트가 발생하면 "Tab changed!"가 출력됨

 

• 설명: 이 코드에서는 onChangeTab 함수 자체를 참조하여 이벤트 핸들러로 설정합니다. 즉, 클릭 이벤트가 발생할 때마다 onChangeTab 함수가 호출됩니다.
• 결과: 클릭 이벤트가 발생하기 전에는 onChangeTab 함수가 실행되지 않고, 클릭 이벤트가 발생할 때마다 해당 함수가 실행됩니다.

 

 

3. 정상동작

function onChangeTab() {
    console.log("Tab changed!");
}

$container.on('click', '.subheader > .sub-nav > .btn', () => { onChangeTab(); });
// 이벤트가 발생하면 "Tab changed!"가 출력됨

• 화살표 함수 사용: 이 코드에서 () => { onChangeTab(); }는 화살표 함수입니다. 이 함수는 클릭 이벤트가 발생할 때 실행되는 익명 함수(무명 함수)를 정의합니다.
• 함수 실행: 화살표 함수 내에서 onChangeTab()이 호출됩니다. 이는 클릭 이벤트가 발생할 때마다 onChangeTab 함수를 직접 실행하도록 하는 것입니다.