Lesson 5 jQuery Events

❮ Previous Lesson Next Lesson ❯

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 actions using jQuery methods. In previous lessons, you have learned the hide method where some elements are hidden after the user clicks 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 executes 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 disappear.

<!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 disappear.

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

❮ Previous Lesson Next Lesson ❯