Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

Java Script Events

By Stephen Bucaro

An event occurs when the user does certain things, for example when the user clicks on an element or moves the mouse pointer over an element, when the browser does something, for example when the browser window resizes or closes, or when certain conditions exist, for example when a media stream has stalled. When an event occurs, an event object is created and its properties are filled with information about the event.

Different types of events provide different properties. For example, the onclick event object provides:

Property	Meaning
event.type	type of the event, example click
event.target	reference to clicked element. (IE uses event.srcElement)
event.button	an integer indicating which mouse button was pressed
event.clientX	x coordinate of the mouse pointer at the moment of click
event.clientY	y coordinate of the mouse pointer at the moment of click

One property is generic to all events: event.type.

Each type of event object has a default method to deal with the event. For example, when a user clicks on a link, the default action is to load the resource specified in the href attribute of the link element. If you want something other than the default action to take place, you have to provide your own event handler.

The code shown below replaces the document's default onclick method with a function that, when you click in the browser window, displays the mouse pointer coordinates in a message box.

document.onclick = function getCoord(event)
{
   // process data from event
   var x = event.clientX;
   var y = event.clientY;
   alert("X=" + x + " Y=" + y);  
}

Binding a Click Event to a Button

<input type="button" id="myBtn" value="Click Me" />

Lets assume that you have the html code shown above for a button on your webpage. The following code, placed in the head section of your webpage would, when the user clicked on the button, display in a message box the text shown on the button.

window.onload = function()
{ 
   document.getElementById('myBtn').onclick = function(event) { alert(event.target.value) }
}

This code attaches a generic function to the window.onload event. That function will execute immediately after the document has completed loading. At that point it will be able to access the button using it's id attribute, and it attaches a generic function to the button's onclick event. When the user clicks on the button, that function displays the button's value attribute in a message box.

In the past web designers attached a function to an event by using an attribute inside the element's tag. Shown below is how to attach a function to the onclick event of a button element

<input type="button" onclick="alert(event.target.value)" value="Buy" />

Event Propagation

Html elements can be nested inside each other. Event bubbling was created to make it so that an event, such as a mouse click, can be handled by two or more event handlers defined by elements nested inside each other.

Initially Microsoft decided, in its Internet Explorer browser that events should "bubble up" from the deepest nested element, to the highest element in the DOM. This became known as "event bubbling". Netscape decided, in its Navigator browser that events should "trickle down" from the highest element to the deepest nested element. This became known as "event capturing".

Let's look at an example of how event bubbling works. The code shown below is placed in the body section of a webpage.

<div id="d1" onclick="alert('hello from red')">red
   <div id="d2" onclick="alert('hello from green')">green
      <div id="d3" onclick="alert('hello from blue')">blue
      </div>
   </div>
</div>

It defines three nested div elements, the deepest nested one containing the text "blue" and having an onclick event that displays the message 'hello from blue'. The next higher div in the nest contains the text "green" and has an onclick event that displays the message 'hello from green'. The top div in the nest contains the text "red" and has an onclick event that displays the message 'hello from red'.