jquery events and functions making things ... - head first ... events and functions making things...

Download jQuery events and functions Making things ... - Head First ...  events and functions Making things happen on your page ... caught up on the browser wars between Microsoft Internet Explorer and Netscape. Eventually,

Post on 12-Feb-2018




0 download

Embed Size (px)


  • this is a new chapter 75

    How many times do I have to dig this out?!

    jQuery events and functions3

    Making things happen on your page

    jQuery makes it easy to add action and interactivity to any web page. In this chapter, well look at making your page react when people interact with it.

    Making your code run in response to user actions takes your

    website to a whole new level. Well also look at building reusable

    functions so you can write the code once and use it multiple times.

  • 76 Chapter 3

    counting the beans

    Emily was pleased with the work you did for her Jump for Joy promotion, but shes met with her accountant and now has a few changes shed like you to make.

    Your jQuery skillz are in demand again

    From: Jump for JoySubject: RE: Jump for Joy Promotion


    You did a great job of making the web promotion work! I met with my accountant

    and crunched some numbers on the success of the promotion.

    My accountant suggested some changes to the app that should bring in more sales.

    Visitors should still get four options to pick from for the chance to receive a

    discount. However, now lets make it the same discount amount each time. My

    accountant recommends offering 20% off visitors purchases before they check

    out. That should be more enticing for them.

    Visitors should only get one chance to find the discount code, which should be in a

    random square for each visit. If a visitor finds the discount code when she clicks,

    show it to her on the screen before she proceeds. Otherwise, show her the box

    where the code was hiding.

    Think you can do this as well as you did the first part?

    -- Emily Saunders jumpforjoyphotos.hg

    Emilys taken some photos of her accountant for his profile, but she couldnt get him to jump for joy. Can your changes to the site help?

  • you are here 4 77

    jquery events and functions

    The money man has a point...Making the promotion limited to only one square keeps Emily from having to hand out so many discount codes, and it keeps people clicking around the site. Seems like these new features are all about clicking





    Its time for another list of requirements. You know what to do: look at Emilys email again and pick out all the new features shes asking for. Write out in plain English what you think each feature is.

  • 78 Chapter 3

    sharpen solution\

    You know how to add a click to your page. But how do you make sure a user can only do it once?

    You also learned in the previous chapters how to run code when a click gets called. Can you think of a way we could use that to help us complete our solution?

    What our solution currently does What we need our solution to do

    Geesh! This guy really is click-happy.


    Its time for another list of requirements. You know what to do: look at Emilys email again and pick out all the new features shes asking for. Write out in plain English what you think each feature is. Heres our solution.

    You only get one chance with me!

    Visitors should only get one chance to find the discount when they load the page. So well need to stop them from clicking more than once in order to find a better discount.

    After the visitor has made his guess and clicked on a box, the answer should be revealed as to whether or not he got it right. If he chose correctly, show him the discount so he can apply it to his order.

    The discount should only be in one of the four image boxes, and the images should be in a different (random) box each time the page loads.

    There will be a standard 20% discount, instead of a variable one. So instead of a percentage, give visitors a discount code.

  • you are here 4 79

    jquery events and functions



    $("#btnSubmit").click( function(){

    // Some jQuery here!



    Making your page eventfulThe Jump for Joy application is all about the clicks. In jQuery and JavaScript, a click is referred to as an event (there are plenty of other events, but for our purposes, well just focus on clicks for now). An event is a mechanism that allows you to run a piece of code when something happens on the page (like a user clicking a button). The code that gets run is a function, and functions allow you to make your jQuery more efficient and reusable. Well look more closely at functions in a minute, but for now, lets look at how a click event really works.

    A click event happens to an HTML button.

    An HTML button

    The event listener hears the event and passes it on to...

    Note the extra step here that you didnt see in Chapter 1.

    and runs code to change the page.

    ...the JavaScript interpreter, which works out what needs to happen for each eventClick!

    Whats with that event listener? I havent seen that before. What does it do, exactly?

    Good question.

    Event listeners are a part of the Document Object Model (DOM). You can add them to any page, so you dont have to rely on users clicking links and buttons to make things happen. Lets take a closer look.

  • 80 Chapter 3

    lights, camera, events

    Event listeners are the browsers way of paying attention to what a person does on a page, and then telling the JavaScript interpreter if it needs to do something or not.

    jQuery gives us very easy ways to add event listeners to any element on the page, so users are no longer just clicking on links and buttons!

    Behind the scenes of an event listener

    What you see in the browser

    I heard a click.

    I need to display an alert!

    An element is clicked.1

    JavaScript interpreter

    The event listener attached to the element hears the click event and tells the JavaScript interpreter what code is attached to it.


    The JavaScript interpreter runs the function specified in the event listener.


    The visitor sees something happen on the page.


    Event listener

    $("#showMessage").click(function() {

    alert('You Clicked Me!');


    An element with the ID of showMessage.

    Add a click event.

    Run this code.


    Behind the Scenes

  • you are here 4 81

    jquery events and functions

    Binding an eventWhen we add an event to an element, we call this binding an event to that element. When we do this, the event listener knows to tell the JavaScript interpreter what function to call.

    There are two ways of binding events to elements.

    Method 1the convenience methodis simply a shortcut for Method 2, but only when the DOM elements exist already.

    jQuery offers many shortcuts like this to help you keep your code cleaner. They are known as convenience methods because they are included solely for ease of usebut they do have limits. Youll want to use Method 2 to add

    events to new DOM elements that you create within your code, like if you added a new clickable image, or a new item to a list that you want the user to interact with.

    We use this method to add events to elements as the page is getting loaded.

    This is often known as the convenience method.

    We use this method just like Method 1, but we can also use it to add events to elements that get added to the page after it is loaded, like when we create new DOM elements.

    Both methods add a click event listener for our element with the ID of myElement.

    Method 1

    Method 2

    $("#myElement").click( function() {



    $("#myElement").bind('click', function() {



  • 82 Chapter 3

    getting trigger-happy

    Triggering eventsEvents can be triggered by a wide variety of things on any given page. In fact, your entire browser is eventful, and pretty much any part of it can trigger events!

    click mousedown mouseout toggledblclick mouseenter mouseoverfocusin mouseleave mouseup

    focusout mousemovehover

    Mouse eventskeydownkeypresskeyup

    Keyboard events

    Form events


    Browser events


    Document loading





  • you are here 4 83

    jquery events and functions

    function () { [this is the code block. do stuff here]}

    Selector + Event + Function = Complex interaction

    Q: What about those functions inside the events?

    A: They are called handler functions. A handler function is a block of code that runs when the event is triggered. Well see more on functions later in this chapter.

    Q: Where can I find all the different types of events?

    A: On the jquery.com website, under Documentation Events.

    Q: How many different categories of events are there?

    A: jQuery groups events into five different categories: browser events, document loading events, form events, keyboard events, and mouse events.

    Q: How many different events are there?

    A: There are nearly 30 different types, between all the different event categories.

    Q: What can trigger an event (i.e., make an event happen) on the page?

    A: Its mostly input devices (keyboard and mouse) that trigger the different event types. However, your browser, the page document, your jQuery code, and even an HTML form on your page can trigger events, too.

    Event is triggered

    Run a function

    JavaScript interpreter

    Event listener

  • 84 Chapter 3

    the event exposed

    HeadFirst: Hi, Event, its nice to be able to talk to you.

    Event: Its great to be here.

    HeadFirst: So, w


View more >