JavaScript Events

JavaScript interaction with HTML is handled through events. Event occur's when the user or the browser manipulates a page. For example: When the page loads, clicking a mouse button, pressing any key, closing a window, resizing a window, etc. all are the examples of events. Events are the part of Document Object Model(DOM).

JavaScript Mouse Events

Event	Decription
onclick	When the user click a mouse button over an HTML element. DOM Ver 2
onmouseover	When the user move the mouse over an HTML element. DOM Ver 2
onmouseout	When the user move the mouse away from an HTML element. DOM Ver 2
onmousedown	When the user press the mouse button over an HTML element. DOM Ver 2
onmouseup	When the user release the mouse button over an HTML element. DOM Ver 2
onmouseenter	The onmouseenter event occurs when the mouse pointer is moved onto an element. DOM Ver 2
onmouseleave	The onmouseleave event occurs when the mouse pointer is moved out of an element.
onmousemove	When the user moves the mouse over an HTML element. DOM Ver 2

Example 1: JavaScript onclick event.

<h1 onclick="this.style.color='red'">Click Me!</h1>

Example 2: JavaScript onmouseover, onmouseout event.

<script>
function bgChange(bg) {
document.body.style.background=bg;
}
</script>

<td onmouseover="bgChange('red')" onmouseout="bgChange('transparent')" bgcolor="red"> </td>       

Example 3: JavaScript onmouseover, onmouseout event.

<script>
function nameon() {
document.getElementById('h2text').innerHTML="WELCOME!";
}
function nameout() {
document.getElementById('h2text').innerHTML="How are you today?";
}
</script>

Example 4: JavaScript onmousedown, onmouseup event.

<img src="images/cheetah.jpg" onmouseup="this.src='images/cheetah.jpg'" onmousedown="this.src='images/tiger.jpg'">

Example 5: JavaScript onmouseenter, onmouseleave event.

<marquee direction="left" bgColor="green" onmouseenter="this.stop()" onmouseleave="this.start()">
Scrolling Text with JavaScript events onmouseenter and onmouseleave
</marquee>

Example 6: JavaScript onmousemove event.

<script>
var i=1;
function moveright() {
document.getElementById('header').style.position="relative";
document.getElementById('header').style.left=i;
i++;
}
</script>