이벤트 리스너란 무엇인가요?
이벤트 리스너는 이벤트가 발생할 때까지 기다린 후 이벤트에 응답하는 JavaScript의 함수입니다. JavaScript는 개발자가 대화식 웹 페이지를 만들기 위해 사용하는 프로그래밍 언어입니다. JavaScript의 이벤트 리스너 함수를 사용하면 마우스 클릭, 키보드 클릭 및 창 크기 조정과 같은 이벤트에 대한 사용자 지정 응답을 만들 수 있습니다. 실시간 이벤트를 기다리고 이에 응답하는 프로그래밍 패러다임을 이벤트 처리라고 합니다.
이벤트 리스너 함수의 구문은 어떻게 되나요?
이벤트 리스너 함수는 다른 JavaScript 함수와 유사한 특성을 공유합니다. 즉, 활성화되면 이벤트를 처리하는 데 필요한 조치를 취합니다. 예를 들어 이벤트 리스너 함수는 표시된 텍스트를 변경하거나, 등록 양식에서 정보를 수집하거나, 데이터베이스에 데이터를 저장할 수 있습니다.
이벤트 리스너 구문
이벤트 리스너 함수는 다음 예와 같이 정식 JavaScript 구문을 따릅니다.
function RespondMouseClick() {
document.getElementById("textdisplay1").innerHTML += "MouseClick happened" ;
}
이 예는 RespondMouseClick 이벤트 리스너 함수를 보여줍니다. 일반적으로 이벤트 리스너의 목적을 반영하여 함수 이름을 작성합니다. 함수에는 이벤트 발생 시에 특정 작업을 수행하는 코드를 작성합니다. 이 예의 함수는 HTML 요소 textdisplay1에 MouseClick happened라는 텍스트를 추가합니다.
이벤트 핸들러 구문
또는 다음 예와 같이 이벤트 핸들러 함수를 사용하여 활성화된 이벤트에 응답할 수 있습니다.
function eventHandler(event) {
if (event.type === "fullscreenchange") {
console.log (“full screen toggle”);
} else {
console.log (“full screen error”);
}
}
이런 식으로 특정 요소의 여러 이벤트 유형을 하나의 함수로 관리할 수 있습니다.
예를 들어 이벤트 기반 애플리케이션에서 모든 유형의 블록체인 이벤트를 처리하도록 이벤트 리스너를 등록할 수 있습니다. 자세한 내용을 보려면 Amazon Managed Blockchain을 사용한 이벤트 기반 애플리케이션 구축에 대해 읽어보세요.
이벤트 리스너는 어떻게 추가하나요?
이벤트 리스너는 해당 JavaScript 요소에 추가한 후에만 활성화됩니다. 이렇게 하려면 다음과 같은 구문을 사용하면 됩니다.
- element.addEventListener(event, listener);
- element.addEventListener(event, listener, useCapture);
- element.addEventListener(event, listener, options);
예를 들어 개발자가 다음 함수를 호출하여 클릭 이벤트 리스너를 버튼 요소에 바인딩할 수 있습니다.
btn.addEventListener("click", RespondMouseClick);
기존 이벤트 핸들러를 덮어쓰지 않고 특정 이벤트 객체에 여러 이벤트 리스너를 추가할 수도 있습니다.
예를 들어 Amazon Web Services(AWS)에서는 개발자가 AWS.Request 객체에 여러 콜백을 연결할 수 있습니다. 자세한 내용은 AWS에서 요청 객체 이벤트 리스너를 사용하는 방법을 참조하세요.
이벤트 추가를 위한 파라미터
다음은 위 구문의 파라미터에 대한 설명입니다.
- event 파라미터는 클릭, 변경, 마우스 오버, 키 다운, 로드 등, 유효한 JavaScript 이벤트입니다.
- listener 파라미터는 특정 이벤트에 응답하기 위해 생성된 이벤트 콜백 또는 JavaScript 함수입니다.
- UseCapture 파라미터는 이벤트 전파 모드를 나타내는 선택적 파라미터입니다. 이 파라미터는 부울 값을 받으며, 여기서 true는 캡처를 활성화하고 false는 버블링을 활성화합니다. 이 파라미터의 기본값은 false로 설정됩니다.
- options 파라미터는 캡처 모드와 거부 신호를 비롯하여 리스너의 동작을 나타내는 몇 가지 선택적 값으로 구성됩니다.
이벤트 리스너는 어떻게 제거하나요?
이벤트 리스너는 연결된 JavaScript 요소에서 제거할 때까지 활성 상태를 유지합니다. 다음 구문을 사용하여 제거할 수 있습니다.
element.removeEventListener(type, listener, useCapture);
이벤트 리스너 제거 파라미터는 이벤트 리스너를 추가할 때 사용하는 파라미터와 비슷합니다. 이벤트 리스너를 제거할 때는 동일한 유형, 리스너 및 useCapture 파라미터를 지정해야 합니다. 그렇지 않으면 이벤트 리스너가 활성 상태로 유지되며 향후 이벤트 발생 시 계속 트리거됩니다.
예를 들어 다음 코드를 사용하여 이벤트를 추가할 수 있습니다.
button.addEventListener("click", RespondMouseClick, true);
하지만 다음 코드를 적용하면 이벤트 리스너가 제거되지 않습니다. useCapture 값이 버튼 객체에 등록된 값과 다르기 때문입니다.
button.removeEventListener("click", RespondMouseClick, false);
이벤트를 성공적으로 제거하고 이벤트가 트리거되지 않도록 하려면 다음 코드를 사용하면 됩니다.
button.removeEventListener("click", RespondMouseClick, true);
중첩된 이벤트 리스너 함수는 어떻게 작동하나요?
중첩된 이벤트 리스너는 각각 서로 다른 계층 레이어의 HTML 요소에 추가된 이벤트 핸들러입니다.
다음 HTML 예제에서 해당 문서는 기반 상위 요소를 소유하고, 상위 요소는 하위 요소를 소유합니다.
<div class="document">
<div class="parent">
<div class="child"></div>
</div>
</div>
복잡한 웹 애플리케이션에는 해당 이벤트 리스너 함수가 포함된 여러 상위-하위 레이어가 있을 수 있습니다. 특정 이벤트가 발생하면 여러 레이어의 이벤트 리스너가 특정 순서로 트리거됩니다. 예를 들어 하위 버튼을 클릭하면 마우스 클릭을 캡처하는 모든 핸들러에 이벤트가 전파됩니다.
이벤트는 버블링과 캡처라는 두 가지 모드로 전파될 수 있습니다.
이벤트 버블링
버블링은 JavaScript 이벤트 처리의 기본 모드입니다. 이 모드에서는 가장 안쪽 레이어에서 가장 바깥쪽 레이어로 이벤트를 전파합니다.
예를 들어 사용자가 하위 섹션의 텍스트 상자를 마우스로 가리킬 수 있습니다. 그러면 애플리케이션은 다음 순서로 이벤트를 전달할 수 있습니다.
- 하위 요소의 이벤트 리스너가 마우스로 가리키는 이벤트를 처리합니다.
- 그런 다음 상위 이벤트 리스너가 이 이벤트를 처리하고 제어권을 문서의 이벤트 리스너로 넘깁니다.
이벤트 버블링을 설정하려면 다음 구문을 사용합니다.
- element.addEventListener(event, listener, [false]);
- element.addEventListener(event, listener);
이벤트 캡처
이벤트 캡처는 이벤트가 가장 바깥쪽 레이어에서 안쪽으로 전파되는 JavaScript의 특수한 이벤트 처리 모드입니다. 이벤트가 내부 레이어의 대상 요소에 도달하면 이벤트 처리 모드가 버블링 모드로 바뀝니다. 그런 다음 버블링 모드에서는 이벤트를 최상위 레이어로 전파합니다.
예를 들어 사용자가 하위 버튼을 클릭하고 다음 시퀀스를 시작할 수 있습니다.
- 문서 이벤트 리스너가 마우스 클릭 이벤트를 처리한 후 상위 이벤트 핸들러가 실행됩니다.
- 이벤트가 대상 요소인 버튼에 도달합니다. 버튼의 이벤트 리스너가 이벤트를 처리합니다.
- 이벤트 처리가 캡처 모드에서 버블링 모드로 전환됩니다.
- 동일한 마우스 클릭 이벤트가 문서에서 끝나기 전에 상위 요소에서 이벤트 핸들러를 실행합니다.
버블링과 캡처 중 하나를 선택하는 방법
버블링과 캡처를 통해 이벤트를 다르게 처리할 수 있습니다. 캡처로 애플리케이션에서 대부분의 이벤트를 처리할 수 있으므로 버블링은 거의 사용되지 않습니다.
버블링과 캡처 중 하나를 결정할 때는 이벤트 전파 흐름을 고려하고 해당 모드가 애플리케이션의 프로그래밍 로직에 얼마나 부합하는지를 고려해야 합니다.
두 개의 하위 요소로 구성된 상위 양식을 예로 들어보겠습니다. 첫 번째 요소는 두 번째 요소에서 이벤트가 발생할 때 즉시 업데이트되어야 합니다. 이 예에서는 캡처 모드를 사용해야 합니다. 캡처 모드는 상위 이벤트 리스너가 이벤트를 처리하고 첫 번째 요소를 업데이트하도록 합니다. 그런 다음 두 번째 하위 요소의 이벤트 리스너에 제어권을 넘깁니다.
중첩된 이벤트 리스너 함수에서 이벤트 전파를 중지하려면 어떻게 해야 하나요?
이벤트는 최종 대상에 도달할 때까지 중첩된 리스너 배열로 전파됩니다. 이벤트가 더 이상 전파되지 않도록 하려면 특정 메서드를 사용해야 합니다.
다음 메서드는 이벤트 리스너에서 이벤트를 중단합니다.
event.stopPropagation();
예를 들어 하위 버튼에서 StopPropagation을 호출하면 마우스 클릭 이벤트가 상위 및 문서 수준으로 전파되지 않습니다. 따라서 상위 수준의 이벤트 리스너가 트리거되지 않습니다.
모든 이벤트 전파 중지
StopPropagation은 현재 유형의 이벤트에 대해서만 전파를 중지합니다. 객체에 다른 유형의 이벤트 리스너가 등록되어 있는 경우 StopPropagation을 호출해도 해당 이벤트 리스너는 트리거됩니다.
특정 객체와 관련한 모든 이벤트를 중지하려면 다음과 같이 StopImmediatePropagation 메서드를 사용하면 됩니다.
event.stopImmediatePropagation();
이벤트 리스너 중 하나에서 StopImmediatePropagation을 호출하면 해당 객체와 관련한 다른 이벤트 리스너도 모두 트리거되지 않습니다.
AWS는 JavaScript 요구 사항을 어떻게 지원하나요?
Amazon Web Services(AWS)는 AWS SDK for JavaScript를 제공하므로 라이브러리와 API를 통해 애플리케이션에서 서비스를 손쉽게 사용할 수 있습니다.
SDK를 사용하여 서버 측 애플리케이션, 웹 애플리케이션 및 모바일 웹 애플리케이션을 개발할 수 있습니다. SDK는 JavaScript 런타임, Node.JS, React Native 및 교차 런타임을 지원합니다. 따라서 개발자가 여러 플랫폼에서 동일한 클라이언트 서비스 패키지를 실행할 수 있습니다.
SDK를 사용할 때 얻을 수 있는 다른 이점은 다음과 같습니다.
- SDK는 TypeScript로 작성되었습니다. TypeScript는 정적 유형 검사와 클래스, 그리고 모듈 지원 등의 이점을 제공합니다.
- SDK는 사용자 지정 작업을 도입할 수 있는 미들웨어 스택을 제공합니다.
- SDK에는 모듈식 아키텍처를 기반으로 합니다. 따라서 필요한 패키지만 사용하여 애플리케이션 성능을 최적화할 수 있습니다.
지금 AWS 계정에 가입하여 JavaScript 애플리케이션을 시작하세요.
