❮❮ PREV NEXT ❯❯

JQUERY - EVENTS

Say, you have opened gmail, entered your userId and Password and clicked on submit. And bingo, you are in your inbox checking mail.

Or you have clicked any button in a website and a popup window opens.

So, after clicking the buttons, some action happens. These are called events in JQuery.

Just remember, every JQuery event has a function inside it. And that function does the work when a JQuery event is called.

Sounds difficult?

Let us quickly jump into a practical example and simplify it.

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://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
	  
      	<script>
      
			$('button').click( function() { 
            	$('p').text("All the contents of p element got replaced")
            });
            
      	</script>    
   </body>
</html>

Output :

So, if you see the above code. The elements are not unknown to us. We can see that there are three <p> elements,

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

And we have a button,

<button> Click me </button>

And on button click, all the contents of <p> element got changed to All the contents of p element got replaced.

And this happened because of the click() event that was triggered by JQuery.

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

The moment the button is clicked, JQuery statement gets triggered.

$('button').click(...);

And the JQuery code locates the <button> element and executes the click() event.

In simple words, some action gets triggered on click and that is called Event.

And if see the click() event, there is a function(An anonymous function) inside it.

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

Note : If you are not aware of function. Just remember, function has a few lines of code that does a particular task.

And the above function is placed inside the click() event.

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

So, when a click() event occurs, the the function executes.

Now, a JQuery click event is not just restricted to a button click. But also a click event is triggered when you check a checkbox or select a radio button.

Let us explain in the below example :

Example :

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

  	<body>
    	<h1> JQuery </h1>
    	
    	Check the Checkbox to change the below line : <input type="checkbox" id="checkboxID" />
    	
    	<p> Contents of P </p>

      	<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
	  
      	<script>
      
			$('#checkboxID').click( function() { 
            	$('p').text("The contents of p element got replaced")
            });
            
      	</script>    
   </body>
</html>

Output :

My First Programme

JQuery

Check the Checkbox to change the below line :

Contents of P

So, in the above code, we have created a checkbox,

<input type="checkbox" id="checkboxID" />

And used the id (i.e. checkboxID) to call the click() event of JQuery.

$('#checkboxID').click( function() {
	$('p').text("The contents of p element got replaced")
});

And if you see the output, once the checkbox is checked, the contents of <p>,

<p> Contents of P </p>

Gets changed to The contents of p element got replaced.

So, far we have looked at the click event. But what if you want a double click event or an event that occurs when a mouse hovers over a text or a button or any HTML element?

Luckily, JQuery provides wide variety of events that supports mouse and keyboard actions.

Let us look at the mouse events in the next tutorial.

❮❮ PREV NEXT ❯❯