Lesson 6 More jQuery Events

6.1 The mousedown() Event

The event occurs and a jQuery function is executed when any of the mouse buttons is pressed while the mouse is over an HTML element.

Example 6.1

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
    $("#header1").mousedown(function(){
         $("#header1").html("<b>You Pressed Me!</b>");
    });
});
</script>
</head>
<body>
<h3 id="header1"> You Pressed Me!</h3>
<p>Paragraph 1.</p>
<p>Paragraph 2</p>
</body>
</html>

Drag the mouse over the heading "Don't Press Me" and press any mouse button to see the effect.

Don't Press Me

Paragraph 1

Paragraph 2

*Note: the html method is to change the content of an element, in this case the element h3 with id 'header1'

6.2 The mouseup() Event

The event occurs and a jQuery function is executed when any of the mouse buttons is pressed and then released while the mouse is over an HTML element.

Example 6.2

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
    $("#header2").mousedown(function(){
         $("#header2").html("<b>You Have Released Me!</b>");
    });
});
</script>
</head>
<body>
<h3 id="header2"> Don't Release Me</h3>
<p>Paragraph 1.</p>
<p>Paragraph 2</p>
</body>
</html>

Drag the mouse over the heading "Don't Release Me" and press and then release any mouse button to see the effect.

Don't Release Me

Paragraph 1

Paragraph 2

6.3 The hover() Event

The hover event involves two jQuery functions. The first function is executed when the user drags the mouse over an html element. The second function is executed when the mouse leaves the HTML element. Actually it is a combination of the mouseenter() and mouseleave() events.

Example 6.3

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
    $("#header2").mousedown(function(){
         $("#header2").html("<b>You Are Hovering Above Me!</b>");
    };
	function(){$("#header3").html("<b>Thanks for leaving Me!</b>");
	});
	

});
</script>
</head>
<body>
<h3 id="header3"> Don't Hover Above Me</h3>
<p>Paragraph 1.</p>
<p>Paragraph 2</p>
</body>
</html>

Drag the mouse over the heading "Don't Hover Above Me" and move the mouse away to see the effects.

Don't Hover Above Me

Paragraph 1

Paragraph 2

6.4 The focus() Event

The Event occurs and a jQuery function is executed when the form field gets focus.

Example 6.4

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
    $("input").focus(function(){
        $(this).css("background-color", "#00ffff");
    });
    $("textarea").focus(function(){
        $(this).css("background-color", "#ff6666");
    });
});
</script>
</head>
<body>
Name: <input type="text" name="fullname"><br>
Comment:<br> <textarea  rows="4" cols="50" name="comment"></textarea>
</body>
</html>

Click on the form area to see the effects. Here we use the CSS method to change the background color.

Name:
Comment:

6.5 The blur() Event

The Event occurs and a jQuery function is executed when the form field loses focus.

Example 6.4

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
    $(".yinfo").focus(function(){
        $(this).css("background-color", "#ff6666");
    });
    $(".yinfo").blur(function(){
        $(this).css("background-color", "#334455");
    });
});
</script>
</head>
<body>
Click on the forms and then click outside the forms to view the effects.
Name: <input type="text" name="fullname"><br>
Comment:<br> <textarea  rows="4" cols="50" name="comment"></textarea>
</body>
</html>

Name:
Email:

❮ Previous Lesson Next Lesson ❯