HTML Tag Attributes

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.