Intro to jQuery, Part II – Events


Welcome! In the first part of the series, we went over some basic jQuery syntax and concepts- however, now that you’ve got your bearings, I’m sure you’re ready to get moving! Changing text or colors of elements on the fly is neat, but with this article we’re going to dive into one of jQuery’s most powerful attribute: event handling.

A Word about JSFiddle

For the purposes of the following articles, we’ll be using JSFiddle, a popular Javascript tool that will allow us to execute our JQuery (along with the requisite HTML and CSS) in the browser. This has the disadvantage of having to open another browser tab to view the results (and heavens forbid that), but it also adds the benefit of you, our esteemed reader, being able to play around with the code and see what kind of results you can come up with.

…and on to Events!

Events in Javascript, when drilled down, are fairly basic: they’re things that happen on a web page. The following are several examples of events:

  • A page loading in the browser
  • A text input, dropdown, or other form element changing
  • A user clicking a button to submit a form

If you’re having some trouble with the concept, let’s try an example that you already know (if you read the first article):

 $(document).ready(function() {
//your code here


That’s right. This code signifying the page being ready is actually saying, “When the page is ready, load the following code.” Voila- event execution.

Binding jQuery Events

“Binding” functions to events basically means that we’re telling jQuery what functionality to execute upon a certain event. The syntax is fairly simple:

//let's select a made-up element by its ID and attach a click handler to it!
$("#ourHTMLElement").click(function() {
        //and here's where you put your code!
        alert("You just wrote your first event handler!");


As you can see, binding events is fairly easy: select an element, use the .click() function to signify you’d like to bind an event handler to the click event of the element, and run your code inside what’s called an anonymous function. These sound intimidating, but they’re really not- all they are is functions without names that only run inside the scope of the handler you’re writing. But what if you want to do something more interesting?

Let’s say we have an input field, a button, and a span tag. We can do some pretty neat stuff with just these three tags using jQuery:

$("button").click(function() {
     //let's select the value of the text box
     var nameValue = $("input").val();
     //now let's populate our span with it!



The above code is easy to break down- we bind a click event to the “button” element, and inside that code we grab the input from the user inside the “input” element and set the text of the “span” element to it.

Final Remarks

Although in this article I’ve only used clicking as an example, as previously stated there are a myriad of events you can utilize to your advantage. Other popular events include a user hovering over an element and changing a form element, but a full (and nearly exhaustive) list may be found here. I encourage you to get creative and see what interesting results you can come up with!

Related Articles

  • Intro to JQuery, Part I

    Introduction Before we begin, it’s important to note that this article assumes basic knowledge of HTML, CSS, and Javascript. If you haven’t already, it may be beneficial to review some...
  • Verifying the .crt and .key

    Verifying the .crt and .key Everybody had that panic moment when apache refusing to start saying ‘private key doesn’t match while installing SSL certificate. Here is how to check whether...
  • SSL Certificate Installation for Courier IMAP and POP

    This guide will provide you information on how to setup and configure SSL certificates for the courier IMAP mail server.   Prior to the installation you will need to purchase...
  • Functionality of the file reading commands

    While learning the how to navigate through directories and systems through terminals and command lines,one thing is certain, your ability to located  exactly your looking for is essential. As we...