Learn how to build and design websites with our tutorials.

jQuery Events Tutorial

View Tutorial Contents


What Are Events?

jQuery makes it easy to respond to events on a web page.

Events on a web page are actions such as:

You can set up jQuery functions called event handlers (also called listeners) to execute any code that you want when the corresponding event occurs. When the corresponding event occurs, that is sometimes referred to as an event being fired, or firing, etc.


jQuery Event Methods Syntax

In the code example below, jQuery is first used to select all button elements on the web page, then assigns the click event to the button element:


$("button").click();

Then you must pass a function to the click event method so that you can define what code should be executed when the event fires. The function that is passed to the click event method id called an event handler function.


$("button").click(function(){
	/* code to be executed */
});

The code example below is an example of what the code above might look like on a web page.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>

<h1>
This is a heading
</h1>

<p>
This is a paragraph.
</p>

<button>Click Here</button>

<script>

$(document).ready(function(){

	$("button").click(function(){
		alert("This is a test.");
	});
	
});

</script>

</body>
</html> 


Common jQuery Methods

Some of the more common jQuery event methods, with an explanation and a code example are listed below.


jQuery .click() Method

The jQuery .click() method attaches an event handler function to an HTML element. The code within the event handler function is executed when the selected HTML element is clicked.

In the code example below, the .click() method is attached to all of the button elements on the web page.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>

<h1>
This is a heading
</h1>

<p>
This is a paragraph.
</p>

<button>Click Here</button>

<script>

$(document).ready(function(){

	$("button").click(function(){
		alert("This is a test.");
	});
	
});

</script>

</body>
</html> 


jQuery .dblclick() Method

The jQuery .dblclick() method attaches an event handler function to an HTML element. The code within the event handler function is executed when the selected HTML element is double-clicked.

In the code example below, the .dblclick() method is attached to all of the button elements on the web page.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>

<h1>
This is a heading
</h1>

<p>
This is a paragraph.
</p>

<button>Click Here</button>

<script>

$(document).ready(function(){

	$("button").dblclick(function(){
		alert("This is a test.");
	});
	
});

</script>

</body>
</html> 


jQuery .mouseenter() Method

The jQuery .mouseenter() method attaches an event handler function to an HTML element. The code within the event handler function is executed when the mouse cursor enters the selected HTML element.

In the code example below, the .mouseenter() method is attached to all of the paragraph elements on the web page.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>

<h1>
This is a heading
</h1>

<p>
This is a paragraph.
</p>

<p>
This is a paragraph.
</p>

<p>
This is a paragraph.
</p>

<script>

$(document).ready(function(){

	$("p").mouseenter(function(){
		alert("This is a test.");
	});
	
});

</script>

</body>
</html> 


jQuery .mouseleave() Method

The jQuery .mouseleave() method attaches an event handler function to an HTML element. The code within the event handler function is executed when the mouse cursor leaves the selected HTML element.

In the code example below, the .mouseleave() method is attached to all of the paragraph elements on the web page.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>

<h1>
This is a heading
</h1>

<p>
This is a paragraph.
</p>

<p>
This is a paragraph.
</p>

<p>
This is a paragraph.
</p>

<script>

$(document).ready(function(){

	$("p").mouseleave(function(){
		alert("This is a test.");
	});
	
});

</script>

</body>
</html> 


jQuery .hover() Method

The jQuery .hover() method takes two functions and is a combination of the .mouseenter() and the .mouseleave() methods. The first function handler is executed when the mouse enters the selected HTML element. The second function handler is executed when the mouse leaves the selected HTML element.

In the code example below, the .hover() method is attached to all of the paragraph elements on the web page.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>

<h1>
This is a heading
</h1>

<p>
This is a paragraph.
</p>

<p>
This is a paragraph.
</p>

<p>
This is a paragraph.
</p>

<script>

$(document).ready(function(){

	$("p").hover(
		function(){
			alert("You are hovering over a paragraph.");
		},
		function(){
			alert("You are no longer hovering over a paragraph.");
		});
	});

</script>

</body>
</html> 


jQuery .mousedown() Method

The jQuery .mousedown() method attaches an event handler function to an HTML element. The code within the event handler function is executed when the mouse cursor is over the element, and the mouse button is pressed.

In the code example below, the .mousedown() method is attached to all of the paragraph elements on the web page.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>

<h1>
This is a heading
</h1>

<p>
This is a paragraph.
</p>

<p>
This is a paragraph.
</p>

<p>
This is a paragraph.
</p>

<script>

$(document).ready(function(){

	$("p").mousedown(function(){
		alert("This is a test.");
	});
	
});

</script>

</body>
</html> 


jQuery .mouseup() Method

The jQuery .mouseup() method attaches an event handler function to an HTML element. The code within the event handler function is executed when the mouse cursor is over the element, and the mouse button is released.

In the code example below, the .mouseup() method is attached to all of the paragraph elements on the web page.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>

<h1>
This is a heading
</h1>

<p>
This is a paragraph.
</p>

<p>
This is a paragraph.
</p>

<p>
This is a paragraph.
</p>

<script>

$(document).ready(function(){

	$("p").mouseup(function(){
		alert("This is a test.");
	});
	
});

</script>

</body>
</html> 


jQuery .focus() Method

The jQuery .focus() method attaches an event handler function to an HTML form field, for example, <input>, <select>, <textarea>, etc. The code within the event handler function is executed when any of the form field elements are clicked on.

In the code example below, the .focus() method is attached to all of the input field elements on the web page.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>

<h1>
This is a heading
</h1>

<p>
This is a paragraph.
</p>

<form>
<input value="some text" type="text"/>
</form>

<script>

$(document).ready(function(){

	$("input").focus(function(){
		alert("This is a test.");
	});
	
});

</script>

</body>
</html> 


jQuery .blur() Method

The jQuery .blur() method attaches an event handler function to an HTML form field, for example, <input>, <select>, <textarea>, etc. The code within the event handler function is executed not when any of the form field elements are clicked on, but when the user clicks again outside of the form field element.

In the code example below, the .blur() method is attached to all of the input field elements on the web page.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>

<h1>
This is a heading
</h1>

<p>
This is a paragraph.
</p>

<form>
<input value="some text" type="text"/>
</form>

<script>

$(document).ready(function(){

	$("input").blur(function(){
		alert("This is a test.");
	});
	
});

</script>

</body>
</html> 


jQuery .on() Method

The jQuery .on() method attaches one or more event handler functions to selected HTML elements.

In the code example below, the .on() method is attached to all of the paragraph elements on the web page.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>

<h1>
This is a heading
</h1>

<p>
This is a paragraph.
</p>

<p>
This is a paragraph.
</p>

<script>

$(document).ready(function(){

	$("p").on("click", function(){
		alert("This is a test.");
	});
	
});

</script>

</body>
</html> 

In the code example below, the .on() method has multiple event handler functions attached to the level one heading.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>

<h1>
This is a heading
</h1>

<p>
This is a paragraph.
</p>

<p>
This is a paragraph.
</p>

<script>

$(document).ready(function(){

	$("h1").on({
		mouseenter: function(){
			$("h1").css("background-color", "green");
		},
		mouseleave: function(){
			$("h1").css("background-color", "red");
		},
		click: function(){
			alert("This is a test.");
		}
	});
	
});

</script>

</body>
</html>