PROWAREtech
JavaScript: Tutorial - A Guide to JavaScript - Page 17
Events
JavaScript interacts with HTML through events.
Event Handlers
Events are actions performed either by the user or by the browser. Some example HTML event attributes are
onload, onclick, onmouseover, onmousemove and onmouseout.
<input type="button" value="Ask for name" onclick="prompt('enter your name', 'your name here');">There are two important objects available to event handlers: event and this.
<input type="button" value="Click me!" onclick="alert(event.type);"><input type="button" value="Click me!" onclick="alert(this.value);">The same can be accomplished using getAttribute().
<input type="button" value="Click me!" onclick="alert(this.getAttribute('value'));">One can access the other input elements in a form by simply referencing its name (username in this example).
<form method="post">
<input type="text" name="username" placeholder="your name here">
<input type="button" value="get name" onclick="alert(username.value)">
</form>Other popular events are onfocus and onblur (which is when focus is lost).
Event handlers can be assigned using DOM Level 0 in JavaScript.
var button = document.getElementById("newButton");
button.onclick = function(){
alert(this.id);
}To remove an event handler use null.
To access the event object:
var button = document.getElementById("newButton");
button.onclick = function(event){
alert(event.type);
}This code adds an event to any element.
function addEvent(element, event_name, func){
if (element.addEventListener)
return element.addEventListener(event_name, func, false); // this is preferred
else if (element.attachEvent)
return element.attachEvent("on" + event_name, func);
else
return element[on + event_name] = func;
}
Focus Events
The onblur event is fired when an element loses focus. The onfocus event is fired when an element
gains focus.
Mouse Events
Mouse events are onmousedown, onmouseup, onclick, onmouseover,
onmouseout, onmousemove and onmousewheel.
Mouse Coordinates
The mouse cursor placement is revealed through the event object. Use the clientX and clientY
properties to find out where the mouse cursor is inside the browser.
<div id="someDiv">click somewhere here</div>
<script type="text/javascript">
var div = document.getElementById("someDiv");
div.onclick = function(event){
alert("coordinates: " + event.clientX + "x" + event.clientY);
};
</script>
The mouse cursor's position in relation to the document are also on the event object. Use pageX
and pageY properties. These are the most used of the mouse coordinates because the left and
top properties of the style object can use them.
<div id="someDiv">click somewhere here</div>
<script type="text/javascript">
var div = document.getElementById("someDiv");
div.onclick = function(event){
alert("coordinates: " + event.pageX + "x" + event.pageY);
};
</script>
The mouse position in relation to the screen/desktop are also on the event object. Use screenX
and screenY properties.
<div id="someDiv">click somewhere here</div>
<script type="text/javascript">
var div = document.getElementById("someDiv");
div.onclick = function(event){
alert("coordinates: " + event.screenX + "x" + event.screenY);
};
</script>
The onmousewheel event uses the wheelDelta property of the event object. It has a
value of +120 when it is rolled forward and a value of -120 when it is backwards.
<html><body><script type="text/javascript">
document.body.onmousewheel = function(event){
alert(event.wheelDelta);
};
</script>
</body></html>Keyboard Events
The three keyboard events are fired in this order: onkeydown onkeypress onkeyup.
See this article for more information.
