JavaScript Tutorial

Define JavaScript

JS Arithmetic Exercise

JavaScript Comment

JavaScript Variable

JavaScript Operators

Conditional Statements

Logical Operators

JavaScript Slider

JS Login Form

JS Popup Boxes

JavaScript Loops

JavaScript Arrays

JS Mouse Events

JS Keyboard Events

Styling Elements

External JavaScript

JS Noscript Tag

JS String Functions

JS Math Functions

JS Date Functions

JS Theme Changer

JS Assignment

Page Stats

Visitor: 98

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

EventDecription
onclickWhen the user click a mouse button over an HTML element. DOM Ver 2
onmouseoverWhen the user move the mouse over an HTML element. DOM Ver 2
onmouseoutWhen the user move the mouse away from an HTML element. DOM Ver 2
onmousedownWhen the user press the mouse button over an HTML element. DOM Ver 2
onmouseupWhen the user release the mouse button over an HTML element. DOM Ver 2
onmouseenterThe onmouseenter event occurs when the mouse pointer is moved onto an element. DOM Ver 2
onmouseleaveThe onmouseleave event occurs when the mouse pointer is moved out of an element.
onmousemoveWhen 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>