Event Handlers
Note that event handlers, which are created by global on...
event attributes, are not dispatched during the capture phase. They are only dispatched during the at target phase and bubbling phase.
onerror Event Handlers
When an error event is propagated to a node with an onerror
event handler, the JavaScript code in the onerror attribute is invoked. In the onerror event handler code, an arguments
array provides access to values from the event constructor and the event
variable provides access to other details of the event and a boolean return value:
- Parameters:
- arguments[0] - the message being reported
- arguments[1] - absolute URL of the resource (document) in which the error occurred
- arguments[2] - in that resource, the line number where the error occurred
- Return value:
event.returnValue = false
if the error has been handled orevent.returnValue = true
if not
onmouseover Event Handlers
When a mouseover event is propagated to a node with an onmouseover
event handler, the JavaScript code in the onmouseover attribute is invoked. In the onmouseover event handler code, the event
variable provides access to details of the event and a boolean return value:
- Parameters:
- event - the event
- Return value:
event.returnValue = true
if the event is to be cancelled orevent.returnValue = false
if not
Note that the return value for mouseover event handlers is the opposite from the return value for other event handlers (below).
onbeforeunload Event Handlers
When a beforeUnload event is propagated to a node with an onbeforeunload
event handler, the JavaScript code in the onbeforeunload attribute is invoked. In the onbeforeunload event handler code, the event
variable provides access to details of the event and a return value that contains a dialog prompt string:
- Parameters:
- event - the event
- Return value:
event.returnValue = "Prompt text"
to display a prompt for the user to confirm leaving the page orevent.returnValue = ""
if not
Other Event Handlers
When any other event is propagated to a node with an event handler, the JavaScript code in the event handler attribute for the event type is invoked. In the event handler code, the event
variable provides access to details of the event and a boolean return value:
- Parameters:
- event - the event
- Return value:
event.returnValue = false
if the event is to be cancelled orevent.returnValue = true
if not
onclick Event Handler Examples
event.returnValue=false
cancels almost any event:
Clicking on this link does not load the
href page because the event is cancelled with onclick="event.returnValue=false"
.
<p>Clicking on <a href="http://www.ExampleOnly.com/" title="Just a tool tip" onclick="alert('clicked'); event.returnValue=false">this link</a> does <em>not</em> load the href page because the event is cancelled with <code>onclick="event.returnValue=false"</code>. </p>
event.preventDefault()
is another way to cancel an event:
Clicking on this link does not load the
href page because the event is cancelled with onclick="event.preventDefault()"
.
<p>Clicking on <a href="http://www.ExampleOnly.com/" title="Just a tool tip" onclick="alert('clicked'); event.preventDefault()">this link</a> does <em>not</em> load the href page because the event is cancelled with <code>onclick="event.preventDefault()"</code>. </p>
Using event.preventDefault()
is the recommended method because it is more browser independent. There are some HTML 5 web browsers, such as Firefox 3, where the event.returnValue=false
method does not cancel the event and the browser loads the page referenced by the <a href> attribute after the alert
box is dismissed.
onmouseover / onmouseout Event Handler Examples
Without stopPropagation(), events on the inner element propagate to the outer element, changing both to a lighter color at the same time:
Try it:
<div style="width: 90px; height: 90px; margin: auto; border: 1px solid black; padding: 0; background-color: blue" onmouseover="this.style.backgroundColor = 'lightblue'" onmouseout="this.style.backgroundColor = 'blue'" > <p style="width: 40px; height: 40px; margin: 0; border: 1px solid black; padding: 0; background-color: green" onmouseover="this.style.backgroundColor = 'lightgreen'" onmouseout="this.style.backgroundColor = 'green'" > </p> </div>
With stopPropagation(), events on the inner element do not affect the outer element so only one changes to a lighter color at a time:
Try it:
<div style="width: 90px; height: 90px; margin: auto; border: 1px solid black; padding: 0; background-color: blue" onmouseover="this.style.backgroundColor = 'lightblue'; event.stopPropagation()" onmouseout="this.style.backgroundColor = 'blue'; event.stopPropagation()" > <p style="width: 40px; height: 40px; margin: 0; border: 1px solid black; padding: 0; background-color: green" onmouseover="this.style.backgroundColor = 'lightgreen'; event.stopPropagation()" onmouseout="this.style.backgroundColor = 'green'; event.stopPropagation()" > </p> </div>