File Under: JavaScript

JavaScript Event – Mouseover

This code was written based on a template by John Resig. The original can be found at John Resig’s addEvent function website.

The code, and the template, are referred to in Webmonkey’s JavaScript Events reference page. In this example, the onMouseover event fires whenever a mouse moves inside of the bounds of its target object after being outside those bounds. It only fires once, but will re-fire if the mouse moves back outside and then inside again.

The Code

<html>

<head>

<script>

// addEvent function by John Resig:

// http://ejohn.org/projects/flexible-javascript-events/

function addEvent( obj, type, fn ) {

  if ( obj.attachEvent ) {

    obj['e'+type+fn] = fn;

    obj[type+fn] = function(){obj['e'+type+fn]( window.event );}

    obj.attachEvent( 'on'+type, obj[type+fn] );

  } else

    obj.addEventListener( type, fn, false );

}

</script>

</head>

<body>



<!-- HTML for example event goes here -->

<div id="mydiv" style="border: 1px solid black; width: 100px; height: 100px; margin-top: 10px;"></div>



<script>

// Script for example event goes here

addEvent(document.getElementById('mydiv'), 'mouseover', function(event) {

	display_short('mouseover');

});

function display_short(str)

{

	clearTimeout();

	document.getElementById('mydiv').innerHTML = str;

	if (str != '')

		setTimeout("display_short('')", 1000);

}

</script>

</body>

</html>

What it Looks Like