The onerror() event and event listener

JavaScript error events provide information on variety of possible errors, for instance: document not loading, image not loading, error exception in page script, etc...

The onerror() is event handler of JavaScript will be triggered if and when there is an error happening while loading or executing a web page. The even provides following information on the nature of the error:

Error message – This is displayed on browser which states the reason of the error.
URL – Link of the file in which error occurred.
Line Number – Line number in the file which caused the error event to be triggered.

The onerror() event can be added into an HTML and JavaScript code as shown below.

Syntax for onerror() event in HTML code

<element onerror=“myScript()”></element>

The JavaScript "myScript" function will be called when the error event triggers.

Example with a HTML based onerror() event attribute

<!DOCTYPE html>
<html>

<head>
<script>
        function errFunc(){
            document.getElementsByTagName('body')[0].innerHTML = "<br />Error in this action! Image file may not be in the location you selected!!";
        }
</script>
</head>

<body>
    <img id="img" src="image.gif" onerror="errFunc();">
</body>

</html>

Syntax for onerror() event in JavaScript code

object.onerror = function(){myScript};

Ifthere is an error happened in a page the function "myScript" is triggered.

Example with a onerror() event handled inside a JavaScript code

<!DOCTYPE html>
<html>

<body>
<script>
	window.onerror = function(msg, url, line){
		document.write("Message : " + msg + "<br/>" );
		document.write("url : " + url + "<br/>" );
		document.write("Line number : " + line + "<br/>" );
	}
</script>	
<input type="button" value="Click Me" onclick="myFunc();" />
</body>

</html>

Syntax for onerror() event in JavaScript code and addEventListener() method

NOTE: The addEventListener() method was not supported in IE8 and earlier versions.

Object.addEventListener(“error”, myScript);

When an error event occurs it’s handler "myScript" is called.

Example with a onerror() event handled by addEventListener() method

<!DOCTYPE html>
<html>

<body>
    //Loading image which does not exists.
  	<br /><br />
  	<img id="img" src="image1.gif" /> 	
    <script>    
    //Event errFunc is triggered when error occurs.
        document.getElementById("img").addEventListener("error", errFunc);
    
    function errFunc(){
      document.getElementsByTagName('body')[0].innerHTML += "<br /><b>addEventListener()</b>: wrong Image URL provided!";
    }
    </script>
</body>

</html>

›› go to examples ››

The onerror() event and event listener

Syntax for onerror() event in HTML code

Example with a HTML based onerror() event attribute

Syntax for onerror() event in JavaScript code

Example with a onerror() event handled inside a JavaScript code

Syntax for onerror() event in JavaScript code and addEventListener() method

Example with a onerror() event handled by addEventListener() method

Comments

About

Contact

Get Connected