❮❮ PREV NEXT ❯❯

EVENTS - off()

The off() Event is used to remove the events associated to an element those were created using <<<Click Here Begins>>>on() event<<<Click Here Ends>>>>. Let us see them one by one in the below examples.

The off() Event can be used to detach an event created by on() event.

Example :

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

  	<body>
    	<h1> JQuery </h1>
    	
    	Type something : <input type = "text">  <br/><br/>
    		
    	<button> Click on the Button first to Detach </button>

      	<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")
      		});
      			
      		$("button").click(function() {
      			$("input").off("focus")
      		});
            
      	</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).

In the next JQuery statement,

$("button").click(function() {
	$("input").off("focus")
});

We have used the off() event to remove the focus event from the <input> element.

Note : You need to click on the button first to remove the focus event from the <input> element.

❮❮ PREV NEXT ❯❯