JavaScript에서 onabort 이벤트는 이미지 등 리소스의 로딩이 사용자에 의해 중단되었을 때 발생하는 이벤트입니다. 예를 들어, 이미지가 완전히 불러와지기 전에 브라우저의 중지 버튼을 클릭하거나 페이지를 벗어나는 경우 onabort 이벤트가 트리거됩니다.
이 이벤트를 활용하면 로딩이 중단된 상황을 감지하여 사용자에게 알림을 표시하거나, 대체 이미지로 교체하는 등의 후속 처리를 수행할 수 있습니다.
abort 이벤트 기본 문법
HTML 요소에 직접 onabort 속성을 지정하거나, JavaScript에서 addEventListener('abort', 함수) 형태로 이벤트 핸들러를 등록할 수 있습니다.
예제 코드
아래 예제는 이미지 로딩이 중단되었을 때 경고창을 표시하는 코드입니다. 직접 실행해 보면서 abort 이벤트의 동작 방식을 확인해 보세요.
<!DOCTYPE html>
<html>
<body>
<script>
function abortFunc() {
alert('오류 - 이미지 로딩이 중단되었습니다');
}
</script>
<img src="/videotutorials/images/tutor_connect_home.jpg" onabort = "abortFunc()">
</body>
</html>코드 설명
- abortFunc() 함수: 이미지 로딩이 중단될 때 호출되는 이벤트 핸들러로, alert() 메서드를 통해 오류 메시지를 화면에 표시합니다.
- onabort 속성: img 태그에 직접 지정되어, 해당 이미지의 로딩이 중단되는 순간 abortFunc() 함수를 자동으로 실행합니다.
참고 사항
abort 이벤트는 주로 <img> 요소에서 사용되며, 최신 브라우저 환경에서는 네트워크 상태나 캐싱 정책에 따라 이벤트 발생 여부가 달라질 수 있으므로, 실무에서는 error 이벤트와 함께 처리하는 것이 안정적입니다.