HTML Tag Attributes
Many HTML
tags have intrinsic events associated
with them. You can define script code to be executed when one of these events
occurs using the event name as an attribute. For example,
<span
style="background-color:yellow;"
onmouseover="this.style.backgroundColor='black';this.style.color='white'"
onmouseout="this.style.backgroundColor='yellow';this.style.color=''">
Sample element with mouse event handlers.
</span>
Scripting
You can
also assign event handlers to elements in the DOM using client-side scripting.
Like other element attributes, events are represented as properties of the
element object so you can set their value just like any other attribute.The
main difference is that unlike most attributes, which take a string value,
event handlers must be set using a function reference. Here's an example,
<span
id="sample1" style="background-color:yellow;">Sample
element with mouse event handlers.</span>
...
JavaScript code ...
function
highlight(event) {
this.style.backgroundColor='black';
this.style.color='white';
}
function
normal(event) {
this.style.backgroundColor='yellow';
this.style.color='';
}
document.getElementById('sample1').onmouseover
= highlight; document.getElementById('sample1').onmouseout = normal;
\
Event Listeners
DOM
objects can also be registered as event listeners. This feature can be used to
assign multiple handlers for a given event. It also allows you to capture
events during either one of two phases in the event flow, capture or bubble.
The
difference between these two phases will be covered later on in the discussion
on event flow. But for now we'll just look at how to register an event
listener.
The basic
methods and syntax are node.addEventListener(eventType, function, useCapture); node.removeEventListener(eventType, function);
Event Flow
Before
going into event processing, it's helpful to understand event flow in the DOM.
HTML documents (and XML or XHTML documents) are hierarchical in nature. lements
and text are nested within other elements. Because of this, when an event
occurs on a particular object, it effectively occurs on any containing objects
as well.
To
illustrate, consider the following HTML: <div>
<p>Some
text in a paragraph element.</p> <p>Another paragraph element with
text.</p> <p>Yet another paragraph with text and also a
<a
href="blank.html">link</a>.</p>
</div>
If you
click on the link defined in this code sample, it will trigger a onclick event
on the A tag. But you're also clicking on the paragraph that contains that
link, and the DIV that contains that P element and so on up to the document
object itself.Any of the elements in this chain can have an event handler
assigned to it to capture the onclick event, regardless of which element it
originated at.
Event Bubbling
The DOM
event model provides for this using a concept called event bubbling. For example, suppose an onclick event handler were
assigned to the DIV tag above.
Clicking
on the link would fire the event first on the A element, it would then
"bubble" up to the containing P element and then up to the DIV where
the handler function would be called. It's possible for the handler to cancel
the event, but assuming it doesn't the event would continue bubbling on up to
the document root and finally, the browser would follow the default action of
loading the link's URL in the window.
Event Capture
You can
also catch events during the capture
phase using the event listener detailed previously. The capture phase
compliments the bubble phase. The capture phase runs first. The event flows
down from the root of the document tree to the target element, then it bubbles
back up.
In this
phase, outer elements will receive the event before it reaches its intended
target. This can be useful if you want to intercept an event for some element
even if it was initially targeted at one of its children or other descendants.
It should
be noted that the term "event capture" is often used loosely to
describe the act of setting an event handler or listener, during either phase.
Here it specifically means intercepting an event during this downward phase of
the event flow, before it reaches its intended target.
The Event Object
Within an event handler, you can do pretty much
anything you want with your script code. Chances are, you'll want to perform
some action related to that event depending on one or more factors.
Mouse Events
Mouse-related
events include:
`
click mousedown mouseup mouseover mouseout
Handling Events
With
dozens of different events constantly firing and moving up and down the
document tree, the real trick to using event handlers is in figuring out what
event to catch, where to attach the handler and how to process it.
Related Topics
Privacy Policy, Terms and Conditions, DMCA Policy and Compliant
Copyright © 2018-2024 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.