Uncategorized

Intro to jQuery, Part II – Events

Introduction

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!");
});

JSFiddle

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!
     $("span").text(nameValue);

});

JSFiddle

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