JavaScript

jQuery Events | Explained

jQuery is a JavaScript library that has been designed to wrap the most commonly used JavaScript functionalities into different functions. This allows the user to write concise and time-saving code, this is the main reason for the popularity of jQuery over other available JavaScript libraries.

jQuery is designed to deal with events on the web page as well, events (if you are not already familiar) are user actions that cause a web page to react. To better explain events, we can say that any action that a web page can respond to is known as a webpage event for example mouse-over, click, document loading.

jQuery Events | Syntax and event methods

The syntax of jQuery events is to use a dot-operator after the factory function $() which contains the selectors.

$("p").click();

With the above line, an event listener is created, the next step is to define what to do when that specific event executes. To do that, define the function inside the parenthesis of the event such as:

$("p").click(function(){
// Body of the function
});

jQuery Events | Examples

To demonstrate the working of jQuery events and event handlers we are going to set up an HTML webpage with google CDN hosted jQuery included in its script tag:

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

The HTML webpage contains these lines to set-up our testing webpage:

<center>
      <h1>I change color on load</h1>
      <div><p id="hello">Hello! I am LinuxBot</p></div>
      <button>Click me!</button>
      <p id="dblClick">Double Click me!</p>
      <p id="hide">Click to Hide me!</p>
</center>

If you run the HTML file, you will get the following result on the browser:

The first event that we are going to go over is the document-on-ready event. This event is automatically executed when the DOM verifies that the webpage has been completely loaded and is not waiting for any further actions or responses. So, we are going to change the background of the <h1> tag upon document load, with the following lines of code:

$(document).ready(function () {
  $("h1").css("background", "red");
});

You will get the following output:

As you can see, we were able to change the background color of the h1 with jQuery events.

The next event is going to be the button press, we are going to prompt the user for his name upon button press. Use the code:

$("button").click(function () {
  var Xyz = prompt("Enter your full name");
});

You get the following output on pressing the button:

As you can see, upon clicking the button that says “Click me!”, a prompt dialogue box was shown asking for the user’s full name.

Mouse click events are pretty common, but something which is widely used is the double click event. To demonstrate this, we are going to display a message on the screen as an alert when the user double clicks on the paragraph with the id “dblclick” with the following lines of code:

$("#dblClick").dblclick(function(){
  alert("Have a nice day!");
})

With the above lines, the output is as

Upon double-clicking on the text, a new alert dialogue box was shown to the user with a greeting.

We can even use the “this” reference when working with jQuery events, to demonstrate we are going to hide the text with the id “hide” upon click. We do this by using the following lines of code:

$("#hide").click(function () {
  $(this).hide();
});

You get the following output upon clicking the text that says “Click to Hide me!”:

The text was hidden upon clicking on it once.

Conclusion

jQuery library provides the functionality to manage and react to web-page events that is the reason why jQuery is referred to as “Tailored” for event handling. jQuery events are added to the jQuery selector function ( $() ) by using a dot operator, this creates an event listener on that element that listens for a particular event. To perform an action based on this event you need to create a function that tells the web page what to do for that specific event. This function is commonly written within the parenthesis of the event listener.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.