이벤트 핸들러 호출 방식 | 함수 사용, 객체 사용

이벤트 발생시 타이틀의 텍스트와 색상을 변경하는 코드를 작성했다.

처음 1번 방법을 작성해보고 수정해서 총 3가지 버전이 있는데,

같은 동작을 수행하지만 코드 구조와 이벤트 핸들러 호출 방식에 차이가 있어서 작성해봄.

 

코드를 구조화하는 방법이나, 핸들러 함수들을 간편하게 정의하는 방법이나 어느방법이 좋은지 딱 정할 수는 없지만, 

지금의 나는 가독성이 좋은 코드가 좋다고 생각하기에 객체를 사용하는 방법이 좋지 않을까 싶다.

 

1. 각 함수를 직접 호출하는 방법

• 각 이벤트에 대한 함수를 직접 정의
• 해당 이벤트가 발생했을 때 함수를 호출
• 이벤트 핸들러를 등록할 때에는 함수 이름을 전달하는 방식

function mouseenterTitle() {
    title.innerText = 'The mouse is here!';
    title.style.color = colors[0];
}

function mouseleaveTitle() {
    title.innerText = 'The mouse is gone!';
    title.style.color = colors[1];
}

function windowResize() {
    title.innerText = 'You just resized!';
    title.style.color = colors[2];
}

function rightClick() {
    title.innerText = 'That was right click!';
    title.style.color = colors[3];
}

function superEventHandler() {
    title.addEventListener("mouseenter", mouseenterTitle);
    title.addEventListener('mouseleave', mouseleaveTitle);
    window.addEventListener('resize', windowResize);
    window.addEventListener('contextmenu', rightClick);
}
superEventHandler();

 

 

 

2. EventHandler에서 함수를 호출하는 방법

1번 방법에서 동일한 코드가 반복되어 줄여보고자 changeTitle 함수를 생성하게 됨

• 객체 리터럴을 사용하여 이벤트 핸들러를 그룹화
• 객체를 사용하여 superEventHandler를 정의하고, 각 이벤트에 대한 핸들러를 객체의 메서드로 정의 
• 이벤트 핸들러에서는 changeTitle 함수를 호출함 -> superEventHandler객체 범위 내에서 동작함!

function changeTitle(text, colorIndex) {
    title.innerText = text;
    title.style.color = colors[colorIndex];
}

function superEventHandler() {
    title.addEventListener("mouseenter", () => changeTitle('The mouse is here!', 0));
    title.addEventListener('mouseleave', () => changeTitle('The mouse is gone!', 1));
    window.addEventListener('resize', () => changeTitle('You just resized!', 2));
    window.addEventListener('contextmenu', () => changeTitle('That was right click!', 3));
}
superEventHandler();

 

 

 

3. 객체를 사용하여 EventHandler를 정의하는 방법

• superEventHandler라는 객체를 정의하고, 객체의 각 메서드로 이벤트 핸들러를 정의
• 각 이벤트에 대한 함수 호출은 superEventHandler 객체의 메서드를 호출하는 방식
• 함수를 그룹화하거나 객체로 구조화하지 않고, 각 함수를 독립적으로 정의

function changeTitle(index, text) {
    title.style.color = colors[index];
    title.innerText = text;
}

const superEventHandler = {
    mouseenterTitle: () => changeTitle(0, 'The mouse is here!'),
    mouseleaveTitle: () => changeTitle(1, 'The mouse is gone!'),
    windowResize: () => changeTitle(2, 'You just resized!'),
    rightClick: () => changeTitle(3, 'That was right click!'),
};

title.addEventListener("mouseenter", superEventHandler.mouseenterTitle);
title.addEventListener("mouseleave", superEventHandler.mouseleaveTitle);
window.addEventListener("resize", superEventHandler.windowResize);
window.addEventListener("contextmenu", superEventHandler.rightClick);