PROWAREtech

articles » current » javascript » tutorial » page-17

JavaScript: Tutorial - A Guide to JavaScript - Page 17

Events (Handlers, Focus, Mouse, Keyboard).

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.

<<<[Page 17 of 22]>>>

This site uses cookies. Cookies are simple text files stored on the user's computer. They are used for adding features and security to this site. Read the privacy policy.
CLOSE