Lesson 17: onmouseover Event

In the previous lessons, we have learned how to write code for the onClick, onChange and onSelect event handlers in JavaScript. In this lesson, we shall learn how to write code for the onmouseover and the onsubmit event handlers.

17.1 The onmouseover Event

The onMouseover event occurs when the user drags the mouse over certain elements of a web page, such as a hyperlink. In the following example, when the user drags the mouse over the hyperlink, a popup dialog will appear prompting him or her to click the OK button. After clicking the OK button, the user will be directed to the particular web page.

Example 17.1

<script>
function mylink()
{alert("Taking you to the webpage now");
location.href="https://javascript-tutor.net/jstutor/jstutor.html";
}
</script>

You need to create the following link to test the script:

<a href="mypage" onmouseover="mylink()">Drag your mouse over me to visit my webpage</>

Drag your mouse over me to visit my webpage

Example 17.2

In this example, when you put your mouse over element like a paragraph, a message will appear on a text area. The JavaScript is as follows:

<script>
function mylink()
{
var yourtext="Your mouse is over me"
document.getElementById("mytext").innerHTML=yourtext;
}
</script>

Put your mouse over the image below to see the secret message.

Click anywhere outside the image to clear the message.

17.2 The onfocusout Event

The onfocusout event happens when an element is about to lose the focus. We can use this event to clear a textbox, change the content of an element, trigger another event and more. The syntax is

<element onfocusout="myScript">

Example 17.3

This example change the text in the textbox to uppercase as well as change the font color to red.

The JavaScript

<script>
function myFunction() {
var myMessage = document.getElementById("mymsg");
myMessage.value = myMessage.value.toUpperCase();
document.getElementById("mymsg").style.color="red"
}

</script>

Created a textbox using the syntax below:

<input type="text" id="mymsg" onfocusout="myFunction()">

Enter some text in the textbox below and click anyway outside it to see the changes.