So far events have just triggered functions but events also have attributes or properties. ONMOUSEDOWN could be left or right button and ONKEYDOWN could be any key on the keyboard being pressed. You might want different things to happen depending on what specifically was done by the user.
In the example below the location of the mouse when it is clicked will be stored in a variable. Add this DIV to the existing page (maybe variables.html) to join the DIV which is already there:
<div onmousedown="clickpos(event)" style="height:300px; width:400px; background-color:blue;">
<p>Click anywhere in this DIV</p>
</div>
Now add this function (there should be three now):
function clickpos(e){
positionx=e.screenX;
positiony=e.screenY;
alert('Mouse position was '+positionx+':'+positiony);
}
The red DIV click should be unchanged but now you can click on the blue DIV and be told the mouse position. Note that here the mouse position is the position within the screen and not the Web page.
The event has properties like any other object. Here the event object is passed to the function and is then available as "e" just like a variable being passed to the function. The location of the mouse cursor is made up of two values which are switched to two variables and then displayed.
The object name "e" was used but you could use any other suitable name for it (many people will use evt).
Keyboard events
This code is not correct JavaScript but it is the easiest way to show keyboard events which work in all common browsers. Standards say that e.which is the correct way to find out which key was pressed but IE doesn't understand that so for the code to work in IE you need to use e.keyCode. You will learn how to deal with these incompatibilities when you look at JavaScript compatibility across browsers.
Keyboard events have attributes/properties as well. Put this function in the HEAD:
function whichkey(e) {
key = e.keyCode;
alert('Key pressed was '+key);
}
Add this to your page:
<input type="text" onkeydown="whichkey(event);">
Click in the INPUT field and type a letter. You should see a dialog box.
The result is not very helpful to human eyes as it is a code for the character rather than the character itself but you can then use that ASCII character code to make decisions about what action should happen next. For that you need to know IF statements which you will learn soon but first make sure you understand events.
Showing all properties of an event
In case you were wondering you can show all of the properties of an event in a particular browser:
function showprops(e){
document.body.innerHTML='<h1>List of attributes for the event in this browser</h1>';
var o = e;
for (att in o) {
var newElement=document.createElement('p');
if (document.body.textContent){
newElement.textContent='Property: '+att+' Value: '+o[att];
} else {
newElement.innerText='Property: '+att+' Value: '+o[att];
}
document.body.appendChild(newElement);
}
}
A lot of that will not make sense until you have read a few more pages of this site. However, the results should be fairly obvious. To trigger this function place it inside SCRIPT tags in the HEAD as usual and place an event trigger somewhere suitable such as:
<body style="height:100%; width:100%;" onmousedown="showprops(event);" onkeyup="showprops(event);">
