The onerror event of the window object
In this tutorial, lets examine a rather secretive event
handler of JavaScript that fires whenever a JavaScript error occurs in a
page. Using it, we can create custom JavaScript error dialog boxes, or
better yet, suppress all JavaScript errors in the document.
 Understanding the
onerror event
As mentioned above, the onerror event fires whenever an
JavaScript error occurs (you know when that happens through those annoying
error boxes that pop up). Look at the title of this document again... it
reads "The onerror event of the window object". The onerror event is of the
window object, a rather unusual object to be attached to. It is attached
this way so it can monitor all JavaScript errors on a page, even those in
the <head> section of the page. Recall that event handlers are usually
inserted inside tags, like the below example with the onClick event handler:
<a href="http://cnn.com" onClick="alert('hi')">CNN</a>
Since onClick events react to a link being clicked on, they
are naturally inserted inside the <a> tag. Now get ready for something that
breaks all the rules. The onerror event, unlike most event handlers, is
not inserted inside any tag. It can't, since there doesn't exist a
"window" tag. Since no such tag exists in HTML, the creators of JavaScript
had to devise an alternate way of declaring this event, and the syntax is as
follows:
<script>
window.onerror=//function to run when an error occurs
</script>
The onerror event is attached directly to the
window object, and is declared inside the script tags. The code on the right
has to be a function
call to the function that will be executed whenever the event fires. A
picture (or in this case, an actual code) is worth a thousand words, so
before anything else, lets first see an example that alerts "an error has
occurred!" when a js error occurs in a page:
<head>
<script type="text/javascript">
function tellerror(){
alert('An error has occurred!')
}
window.onerror=tellerror
</script>
<script type="text/javascript">
document.write('hi there'
</script>
</head>
We defined a function (tellerror) that simply
alerts a message by itself. Now look at how it is hooked up to the onerror
event- through the function's name, without the normal
parentheses. You should follow this rule whenever hooking up a function to
the onerror event (or any event defined in this manner). In the above
example, the careless JavaScript programmer had forgotten to close the
document.write() method with a closing parentheses.
Click here
to see what happens. As you can see, not only did the usual error box pop
up, function tellerror was executed as well.
Let's sum up what we've gone through up to
now. The onerror event is defined by attaching it directly to the window
object, inside the <script> tags. The code to be executed should be attached
to the right of the event handler, defined as a function, and without the
usual parentheses. This function is executed whenever a js error occurs.
Just one more thing before we move on. Notice
the placement of the onerror
code in the above example; it is declared prior to any other codes, defined
inside the <head> section, and wrapped around in its own <script> tags. This
is necessary to ensure that the onerror event intercepts all scripting
errors in the page.
|
