JavaScript Tutorial JavaScript Examples JQuery Tutorial CSS Tutorial HTML Tutorial About Us

Lesson 5 jQuery Events


The most common event that you have encountered in previous examples is the Document Ready Event. This event is to prevent any jQuery code from running before the document is loaded completely. The syntax is:

$(document).ready(function(){

// jQuery code...

});
	 

Other events are some actions triggered by the users when they visit and do something on the web page. For example, clicking the mouse button or pressing a key on the keyboard are events. jQuery can respond to an event and carry out certain action using jQuery methods. In previous lessons, you have learned the hide method where some elements are hidden after the user click a button.

Table 5.1 below shows some common events.

Table 5.1 List of events
Mouse Events Keyboard Events Form Events Document Events
click keypress focus load
dblclick keydown blur unload
mouseenter keyup change resize
mouseleave select scroll
mouseup submit ready
mousedown focusin
hover

5.1 JQuery Event Handler

To assign an event to an an HTML element, we use the following syntax:

$("element").event();

We also need to attach an event handler function to the element so that it execute some actions after the event is triggered(or fired).

The syntax is:

  
   $("element").event(function(){
        jQuery code that execute some actions
    });
  

5.2 The Click() event

The jQuery function is executed when the user clicks on an HTML element.

Example 5.1

In this example, when the user clicks the button, all the paragraphs will disapper.

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").hide();
    });
});
</script>
</head>
<body>
<h2> JQuery Event</h2>
<p>Paragraph 1.</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<button>Click to hide paragraphs</button>
</body>
</html>

JQuery Click Event

Paragraph 1.

Paragraph 2

Paragraph 3

5.3 The dblclick() event

Example 5.2

In this example, when the user double-clicks the button, all the paragraphs will disapper.

The jQuery function is executed when the user double-clicks on an HTML element.

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
    $("button").dblclick(function(){
        $("p").hide();
    });
});
</script>
</head>
<body>
<h2> JQuery Event</h2>
<p>Paragraph 1.</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<button>Click to hide paragraphs</button>
</body>
</html>

JQuery Double-Click Event

Paragraph 1.

Paragraph 2

Paragraph 3


5.4 The mouseenter() Event

The jQuery function is executed when the mouse pointer enters an HTML element.

Example 5.3

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
    $("h3").mouseenter(function(){
        $("h3").hide();
    });
});
</script>
</head>
<body>
<h3> Drag the mouse over me to make me disappear</h3>
<p>Paragraph 1.</p>
<p>Paragraph 2</p>
</body>
</html>

Drag the mouse over me to make me disappear

Paragraph 1.

Paragraph 2

5.5 The mouseleave() Event

The jQuery function is executed when the mouse pointer leaves an HTML element.

Example 5.4

<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
    $("h3").mouseenter(function(){
        alert("You are leaving me!");
    });
});
</script>
</head>
<body>
<h3> Don't Leave Me</h3>
<p>Paragraph 1.</p>
<p>Paragraph 2</p>
</body>
</html>

Don't Leave Me

Paragraph 1.

Paragraph 2




Copyright©2008 Dr.Liew Voon Kiong. All rights reserved |Contact|Privacy Policy