JQUERY - MOUSE EVENTS

Let us see the important mouse events provided by JQuery.

Click Event

Example :

<html>
	<head>
		<title> My First Programme </title>
	</head>

	<body>
		<h1> JQuery </h1>
		<p class = "para1"> First Paragraph </p>
		<p class = "para2"> Second Paragraph </p>
		<p class = "para3"> Third Paragraph </p>
	
		<button> Click me </button>

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

		<script>

			$('button').click( function() {
				$('p').text("All the contents of p element got replaced")
			});
		
		</script>
</body>
</html>

Output :

Double Click Event

The Double Click Event or dblclick() Event can have a function inside it. And it executes when an element is double clicked.

Example :

<html>
	<head>
		<title> My First Programme </title>
	</head>

	<body>
		<h1> JQuery </h1>
		<p class = "para1"> First Paragraph </p>
		<p class = "para2"> Second Paragraph </p>
		<p class = "para3"> Third Paragraph </p>
	
		<img src = "/myImage.png" alt = "Double Click me"/>

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

		<script>

			$('img').dblclick( function() {
				$('p').text("All the contents of p element got replaced")
			});
		
		</script>
	</body>
</html>

Output :

So, if you look at the above code, we have three <p> elements,

<p class = "para1"> First Paragraph </p>
<p class = "para2"> Second Paragraph </p>
<p class = "para3"> Third Paragraph </p>

And we have an image,

<img src = "/myImage.png" alt = "Double Click me"/>

Now, if we take a look at the JQuery statement,

$('img').dblclick( function() {
	$('p').text("All the contents of p element got replaced")
});

At first we locate the image,

$('img')

Then we use the dblclick() event,

$('img').dblclick(...)

And put the anonymous function inside 'dblclick()' event to change the contents of <p> element.

$('img').dblclick( function() {
	$('p').text("All the contents of p element got replaced")
});

And the contents of the <p> elements gets changed.

Hover Event

The hover() Event executes when a mouse pointer either enters or leaves an element. In other words, if you just move the mouse pointer through an element, hover() Event executes.

The hover() Event accepts two functions. The first function executes when the mouse pointer have entered an element and the second function executes when the mouse pointer leaves an element.

Example :

<html>
	<head>
		<title> My First Programme </title>
	</head>

	<body>
		<h1> JQuery </h1>
		<p class = "para1"> First Paragraph </p>
	
		<img src = "/myImage.png" alt = "Bring the mouse pointer here"/>

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

		<script>

			$('img').hover(
				function() {
					$('p').text("Mouse pointer is in the image")
				}, function() {
					$('p').text("The Mouse pointer is outside the image")
				}
			);
		
		</script>
	</body>
</html>

Output :

So, if you look at the above code, we have a <p> element,

<p class = "para1"> First Paragraph </p>

And we have an image,

<img src = "/myImage.png" alt = "Bring the mouse pointer here"/>

Now, if we take a look at the JQuery statement,

$('img').hover(
	function() {
		$('p').text("Mouse pointer is in the image")
	}, function() {
		$('p').text("The Mouse pointer is outside the image")
	}
);

At first we locate the image,

$('img')

Then we use the hover() event,

$('img').hover(...)

And put two anonymous functions inside hover() event to change the contents of <p> element.

$('img').hover(
	function() {
		$('p').text("Mouse pointer is in the image")
	}, function() {
		$('p').text("The Mouse pointer is outside the image")
	}
);

And the first function,

function() {
	$('p').text("Mouse pointer is in the image")
}

Changes the content of <p> with the text,

'Mouse pointer is in the image'

When the mouse pointer enters the Image.

And the second function

function() {
	$('p').text("The Mouse pointer is outside the image")
}

Changes the content of <p> with the text,

'The Mouse pointer is outside the image'

When the mouse pointer leaves the Image.

Mouseenter Event

The mouseenter() Event executes when a mouse pointer enters an element.

Example :

<html>
	<head>
		<title> My First Programme </title>
	</head>

	<body>
		<h1> JQuery </h1>
		<p class = "para1"> First Paragraph </p>
	
		<img src = "/myImage.png" alt = "Bring the mouse pointer here"/>

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

		<script>

			$('img').mouseenter( function() {
				$('p').text("Mouse pointer is in the image")
			});
		
		</script>
	</body>
</html>

Output :

So, if you look at the above code, we have a <p> element,

<p class = "para1"> First Paragraph </p>

And we have an image,

<img src = "/myImage.png" alt = "Bring the mouse pointer here"/>

Now, if we take a look at the JQuery statement,

$('img').mouseenter( function() {
	$('p').text("Mouse pointer is in the image")
});

At first we locate the image,

$('img')

Then we use the mouseenter() event,

$('img').mouseenter(...)

And put the function inside mouseenter() event to change the contents of <p> element.

$('img').mouseenter( function() {
	$('p').text("Mouse pointer is in the image")
});

And the function,

function() {
	$('p').text("Mouse pointer is in the image")
}

Changes the content of <p> with the text,

'Mouse pointer is in the image'

When the mouse pointer enters the Image.

Mouseleave Event

The mouseleave() Event executes when a mouse pointer leaves an element.

Example :

<html>
	<head>
		<title> My First Programme </title>
	</head>

	<body>
		<h1> JQuery </h1>
		<p class = "para1"> First Paragraph </p>
	
		<img src = "/myImage.png" alt = "Bring the mouse pointer here"/>

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

		<script>

			$('img').mouseleave( function() {
				$('p').text("Mouse pointer left the image")
			});
		
		</script>
	</body>
</html>

Output :

So, if you look at the above code, we have a <p> element,

<p class = "para1"> First Paragraph </p>

And we have an image,

<img src = "/myImage.png" alt = "Bring the mouse pointer here"/>

Now, if we take a look at the JQuery statement,

$('img').mouseleave( function() {
	$('p').text("Mouse pointer left the image")
});

At first we locate the image,

$('img')

Then we use the mouseleave() event,

$('img').mouseleave(...)

And put the function inside mouseleave() event to change the contents of <p> element.

$('img').mouseleave( function() {
	$('p').text("Mouse pointer left the image")
});

And the function,

function() {
	$('p').text("Mouse pointer left the image")
}

Changes the content of <p> with the text,

'Mouse pointer left the image'

When the mouse pointer leaves the Image.

Mousedown Event

The mousedown() Event executes when a mouse button is clicked on an element(Be it a left click, right click or a middle button click).

Example :

<html>
	<head>
		<title> My First Programme </title>
	</head>

	<body>
		<h1> JQuery </h1>
		<p class = "para1"> First Paragraph </p>
	
		<img src = "/myImage.png" alt = "Bring the mouse pointer here"/>

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

		<script>

			$('img').mousedown( function() {
				$('p').text("You have pressed the mouse button")
			});
		
		</script>
	</body>
</html>

Output :

So, if you look at the above code, we have a <p> element,

<p class = "para1"> First Paragraph </p>

And we have an image,

<img src = "/myImage.png" alt = "Bring the mouse pointer here"/>

Now, if we take a look at the JQuery statement,

$('img').mousedown( function() {
	$('p').text("You have pressed the mouse button")
});

At first we locate the image,

$('img')

Then we use the mousedown() event,

$('img').mousedown(...)

And put the function inside mousedown() event to change the contents of <p> element.

$('img').mousedown( function() {
	$('p').text("You have pressed the mouse button")
});

And the function,

function() {
	$('p').text("You have pressed the mouse button")
}

Changes the content of <p> with the text,

'You have pressed the mouse button'

When the mouse button(Be it a left click, right click or a middle button click) is clicked on the image.

Mouseup Event

The mouseup() Event executes when a mouse button is released after clicking on an element(Be it a left click, right click or a middle button click).

Example :

<html>
	<head>
		<title> My First Programme </title>
	</head>

	<body>
		<h1> JQuery </h1>
		<p class = "para1"> First Paragraph </p>
	
		<img src = "/myImage.png" alt = "Bring the mouse pointer here"/>

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

		<script>

			$('img').mouseup( function() {
				$('p').text("You have released the mouse button")
			});
		
		</script>
	</body>
</html>

Output :

So, if you look at the above code, we have a <p> element,

<p class = "para1"> First Paragraph </p>

And we have an image,

<img src = "/myImage.png" alt = "Bring the mouse pointer here"/>

Now, if we take a look at the JQuery statement,

$('img').mouseup( function() {
	$('p').text("You have pressed the mouse button")
});

At first we locate the image,

$('img')

Then we use the mouseup() event,

$('img').mouseup(...)

And put the function inside mouseup() event to change the contents of <p> element.

$('img').mouseup( function() {
	$('p').text("You have released the mouse button")
});

And the function,

function() {
	$('p').text("You have released the mouse button")
}

Changes the content of <p> with the text,

'You have released the mouse button'

When the mouse button(Be it a left click, right click or a middle button click) is released after you have clicked on the image.

Focus Event

The focus() Event gets executed, when a field (Like an text or textarea field) gets focus.

Example :

<html>
	<head>
		<title> My First Programme </title>
	</head>

	<body>
		<h1> JQuery </h1>
		
		Type Something : <input type = "text">

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

		<script>

			$('input').focus( function() {
				$(this).css("background-color", "yellow")
			});
		
		</script>
	</body>
</html>

Output :

So, if you look at the above code, we have an <input> element, that accepts a text.

<input type = "text">

Now, if we take a look at the JQuery statement,

$('input').focus( function() {
	$(this).css("background-color", "yellow")
});

At first we locate the <input> element,

$('input')

Then we use the focus() event,

$('img').focus(...)

And put the function inside focus() event to change the color of <input> element.

$('input').focusin( function() {
	$(this).css("background-color", "yellow")
});

And the function,

function() {
	$(this).css("background-color", "yellow")
});

Locates the current element (i.e. <input>) using this and changes the color of the <input> element.

Note : In simple words, when we click on the <input> element, it gets the focus.

Blur Event

The blur() Event gets executed, when a field (Like an text or textarea field) comes out of focus.

Example :
```
<html>
	<head>
		<title> My First Programme </title>
	</head>

	<body>
		<h1> JQuery </h1>
		
		Type Something : <input type = "text">

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

		<script>
		
			$('input').focus( function() {
				$(this).css("background-color", "yellow")
			});

			$('input').blur( function() {
				$(this).css("background-color", "red")
			});
		
		</script>
	</body>
</html>
```
Output :

So, if you look at the above code, we have an <input> element, that accepts a text.
```
<input type = "text">
```
Now, if we take a look at the JQuery statement, we have used the focus() event to demonstrate, how the color changes, when the element comes out of focus.
```
$('input').focus( function() {
	$(this).css("background-color", "yellow")
});
```
So, as seen in the previous example, the color of the input element changes to yellow, when it has the focus.

Then we have the JQuery statement,
```
$('input').blur( function() {
	$(this).css("background-color", "red")
});
```
That locates the <input> element and when it comes out of focus, the color of the <input> element changes from yellow to red.

Next, let us look at the keyboard Events.

❮❮ PREV NEXT ❯❯

JQUERY - MOUSE EVENTS

Click Event

Example :

Output :

Double Click Event

Example :

Output :

Hover Event

Example :

Output :

Mouseenter Event

Example :

Output :

Mouseleave Event

Example :

Output :

Mousedown Event

Example :

Output :

Mouseup Event

Example :

Output :

Focus Event

Example :

Output :

Blur Event

Example :

Output :