EVENTS - one()

The one() Event is quite similar to the on() event. It is used to attach event/events to an element.

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

The one() 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://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"> </script>

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

Output :

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

$("input").one("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 one() event attaches the focus event with the input element.

The one() 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://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"> </script>

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

Output :

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

$("input").one("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 one() event attaches the keypress and blur with the input element.

The one() 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://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"> </script>

		<script>
	
			$("input").one( {
				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").one( {
	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 ❯❯