HTML에서 onerror 이벤트는 요소를 로드하는 과정에서 오류가 발생했을 때 트리거됩니다. 가장 대표적인 예로, 이미지 파일이 존재하지 않거나 경로가 잘못되어 로드에 실패하는 경우를 들 수 있습니다. 이때 onerror 이벤트 속성을 활용하면 오류 상황을 감지하여 사용자에게 알림을 표시하거나 대체 이미지로 교체하는 등의 후속 처리를 수행할 수 있습니다.
예제
아래 코드를 실행하면 onerror 이벤트 속성의 실제 동작을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<img src = "new.png" onerror = "display()">
<p>이미지가 정상적으로 로드되지 않으면 알림창이 표시됩니다.</p>
<script>
function display() {
alert("이미지 로드에 실패했습니다.");
}
</script>
</body>
</html>
동작 방식
위 예제에서 img 태그의 src 속성으로 지정된 new.png 파일을 브라우저가 찾지 못하면, 자동으로 onerror 이벤트가 발생합니다. 이 이벤트에는 display() 함수가 연결되어 있으므로, 함수가 호출되면서 "이미지 로드에 실패했습니다."라는 내용의 alert 알림창이 화면에 나타납니다.
이처럼 onerror 이벤트는 이미지, 스크립트, 스타일시트 등 외부 리소스 로드 실패를 감지하는 데 유용하게 사용되며, 사용자에게 명확한 피드백을 제공함으로써 웹 페이지의 안정성과 사용자 경험을 향상시킬 수 있습니다.