JQUERY - ON() EVENT

The on() Event is one of the most important event in JQuery. It has various functionalities that is quite useful.

Let us see them one by one in the below examples.

The on() Event can be used to attach an event to an element.

Example :

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

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

		<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>

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

Output :

So, in the above example, we have used the JQuery statement,

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

To change the background color of the <input> element to yellow, when you click on the <input> element(i.e. When it gets focused).

Just note the on() event attaches the focus event with the input element.

The on() Event can also be used to attach multiple events to an element.

Example :

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

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

		<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>

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

Output :

So, in the above example, we have used the JQuery statement,

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

To change the background color of the <input> element to yellow, when you either press a key(i.e. keypress event) or you click outside the <input> element(i.e. blur event).

Just note the on() event attaches the keypress and blur with the input element.

The on() Event can also be used to attach multiple events handlers as a Map.

Example :

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

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

		<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>

		<script>
	
			$("input").on( {
				focus : function() {
					$(this).css("background-color", "yellow")
				},
				keypress : function() {
					$(this).css("background-color", "orange")
				},
				blur : function() {
					$(this).css("background-color", "violet")
				}
			});
		
		</script>
	</body>
</html>

Output :

So, in the above example, we have used the JQuery statement,

$("input").on( {
	focus : function() {
		$(this).css("background-color", "yellow")
	},
	keypress : function() {
		$(this).css("background-color", "orange")
	},
	blur : function() {
		$(this).css("background-color", "violet")
	}
});

So, we have three events with three different event handlers(i.e. Functions).

The first event is the focus event,

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

Second event is the keypress event,

keypress : function() {
	$(this).css("background-color", "orange")
}

And the third event is the blur event,

blur : function() {
	$(this).css("background-color", "violet")
}

Now, if any one of the event(i.e. focus, keypress or blur) occurs. The color of the <input> box changes accordingly.

So, for one element(i.e. <input>), we can specify multiple events(i.e. focus, keypress or blur)

❮❮ PREV NEXT ❯❯