Detecting Which Event Type Fired


Once an event is fired, the function it triggers doesn't inherently know how it was triggered. The type event property can tell you what event type was fired, allowing you to write a function that can respond differently depending on how the action was initiated (Figure 15.1).

Figure 15.1. The general syntax for detecting the event type


In this example (Figure 15.2), clicking anywhere outside of the image will trigger the click event, but clicking the image will detect the mousedown event.

Figure 15.2. The event type that triggered the function (in this case, mousedown) is displayed in the alert message.


To find which event type fired:

1.

function initPage(objectID) {...}


Add the function initPage() to your code (Code 15.1). You can bind events to a single object, multiple objects, or the entire document (see "Binding Events to Objects" in Chapter 12).

Code 15.1. The type event property is used to identify the type of event that triggered the function.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML &amp; Ajax | Detecting Which Event Type Fired</title> <script type="text/javascript"> function initPage(objectID) {      var object = document.getElementById(objectID);      object.onmousedown = findEventType;      document.onclick= findEventType; } function findEventType(evt) {      var evt = (evt) ? evt : ((window.event) ? window.event : null);      if(evt.type)       alert('This was triggered by a ' + evt.type + ' event.'); } </script> <style type="text/css" media="screen"> #object1{      position:relative;      top: 50px;      left: 100px;      width: 392px;      cursor: pointer;      border: solid 2px #f00; } </style> </head> <body onload="initPage('object1');"> <h1>Click me and I will tell you what type of event this is.</h1> <div ><img src="/books/3/292/1/html/2/alice06a.gif" height="480" width="392" alt="alice" /></div> </body></html>

2.

function findEventType(evt) {...}


Add the function findEventType() to your code.

This code first uses the event equalizer discussed in Chapter 12 ("Passing Events to a Function") to allow Internet Explorer and W3C-compliant browsers to play together:

var evt = (evt) ? evt : ((window.event) ? window.event : null)


It then uses the type event property to identify the event that triggered the function.

For this example, I simply added an alert to report the event type, but you could use if or switch statements to tailor the code for different event types.

3.

onload="initPage('object1');"


Add an onload event handler in the <body> tag to trigger the initPage() function created in Step 1. This sets up the events for the page.

Tip

  • Although this example uses event binding, you could also use it with an event handler placed directly in an HTML tag. But remember to pass the event variable in the function call:

    onclick="findEventType(event);"





CSS, DHTML and Ajax. Visual QuickStart Guide
CSS, DHTML, and Ajax, Fourth Edition
ISBN: 032144325X
EAN: 2147483647
Year: 2006
Pages: 230

Similar book on Amazon

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net