In that case its parent element in the DOM tree is given the chance to respond

In that case its parent element in the dom tree is

This preview shows page 220 - 222 out of 517 pages.

initiated event, as is the case for images? In that case, its parent element in the DOM tree is given the chance to respond to the event handler. For example, if you click on an img element inside a div and the img has no click handler, then the div will receive the click event. This process continues until some element handles the event or it “bubbles” all the way up to the top-level window , which may or may not have a built-in response depending on the event. Our discussion of events and event handlers motivates the third common use of JavaScript’s this keyword (recall that Section 6.3 introduced the first two uses). When an event is handled, in the body of the event handler function, jQuery will arrange for this to refer to the element to which the handler is attached (which may not be the element that originally received the event, if the event “bubbled up” from a descendant). However, if you were programming without jQuery, the value of this in an event
Image of page 220
handler is the global object ( document.window ), and you have to examine the event’s data structure (usually passed as the final argument to the handler) to identify the element that handled the event. Since handling events is such a common idiom, and most of the time an event handler wants to inspect or manipulate the state of the element on which the event was triggered, jQuery is written to explicitly set this to that DOM element. Putting all these pieces together, Figure 6.10 shows the client-side JavaScript to implement a checkbox that, when checked, will hide any movies with ratings other than G or PG. Our general strategy for JavaScript can be summarized as: 1. Identify the DOM elements we want to operate on, and make sure there is a convenient and unambiguous way of selecting them using $() . 2. Create the necessary JavaScript functions to manipulate the elements as needed. For this simple example we can just write them down, but as we’ll see in Section 6.7 , for AJAX or more complex functions we will use TDD (Chapter 8 ) to develop the code. 3. Define a setup function that binds the appropriate JavaScript functions to the elements and performs any other necessary DOM manipulation. 4. Arrange to call the setup function once the document is loaded. 1 var MovieListFilter = { 2 filter_adult: function () { 3 // ’this’ is *unwrapped* element that received event (checkbox) 4 if ($(this).is(’:checked’)) { 5 $(’’).hide(); 6 } else { 7 $(’’).show(); 8 }; 9 }, 10 setup: function() { 11 // construct checkbox with label 12 var labelAndCheckbox = 13 $(’<label for="filter">Only movies suitable for children</label>’ + 14 ’<input type="checkbox" id="filter"/>’ ); 15 labelAndCheckbox.insertBefore(’#movies’); 16 $(’#filter’).change(MovieListFilter.filter_adult); 17 } 18 } 19 $(MovieListFilter.setup); // run setup function when document ready Figure 6.10: Using jQuery to add a “filter movies” checkbox to RottenPotatoes’ list of movies page; put this code in app/assets/javascripts/movie_list_filter.js . The text walks through the example in detail, and additional figures in the rest of the chapter generalize the techniques shown here. Our examples use jQuery’s DOM manipulation features rather than the browser’s built-in
Image of page 221
Image of page 222

You've reached the end of your free preview.

Want to read all 517 pages?

  • Spring '19
  • Dr.Marcos

What students are saying

  • Left Quote Icon

    As a current student on this bumpy collegiate pathway, I stumbled upon Course Hero, where I can find study resources for nearly all my courses, get online help from tutors 24/7, and even share my old projects, papers, and lecture notes with other students.

    Student Picture

    Kiran Temple University Fox School of Business ‘17, Course Hero Intern

  • Left Quote Icon

    I cannot even describe how much Course Hero helped me this summer. It’s truly become something I can always rely on and help me. In the end, I was not only able to survive summer classes, but I was able to thrive thanks to Course Hero.

    Student Picture

    Dana University of Pennsylvania ‘17, Course Hero Intern

  • Left Quote Icon

    The ability to access any university’s resources through Course Hero proved invaluable in my case. I was behind on Tulane coursework and actually used UCLA’s materials to help me move forward and get everything together on time.

    Student Picture

    Jill Tulane University ‘16, Course Hero Intern

Stuck? We have tutors online 24/7 who can help you get unstuck.
A+ icon
Ask Expert Tutors You can ask You can ask You can ask (will expire )
Answers in as fast as 15 minutes
A+ icon
Ask Expert Tutors