Event Listeners and Objects
This section provides a quick description of event trigger attributes on different HTML tags and the 'event' object representing the event with detail information about the event. A tutorial example is provided to display mouse location by adding a listener to the mouse-pushed-down event.
A typical Web browser also supports special HTML attributes to let you add event listeners and passing event objects. Here are few commonly used HTML attributes on various HTML tags:
More event trigger attributes will be introduced in other chapters in this book.
In each event trigger attribute, the browser will provide an object called "event", which presents this event and contains detailed information about this event. This "event" object has various properties and methods for you to use.
<html> <!-- Event_Object_and_Trigger.html Copyright (c) 2013 by Dr. Herong Yang, herongyang.com --> <head> <title>Event Object and Trigger</title> </head> <body onMouseDown= "window.alert('X: '+event.clientX+', Y: '+event.clientY);"> <p>Click anywhere on the page to see location coordinates.</p> </body> </html>
In this tutorial example, the "onMouseDown" event trigger attribute on the "body" tag is used to add a short listener code to be executed with the user push down the mouse button on the page. The listener code uses the "event" object provided by the browser to retrieve x and y coordinates of the location.
The coordinates are reported back the user with an alert box by calling the "alert()" method
on the "window" object. See the picture below:
Table of Contents