w6d4

Question 1

Explain how DOM elements bubble

Answer 1

DOM events typically bubble: if an event fires on element X which lives inside element Y, then after being fired on X the event will bubble up and be fired on Y.

Question 2

What is the difference between the currentTarget and the target?

Answer 2

The currentTarget is the element that the event handler corresponds to (i.e. a ul), and the target is what actually activates the event handler (i.e. a li)

Question 3

What is event delegation?

Answer 3

A pattern of installing a single event handler on a parent to catch events on its children.

Question 4

What does the 3 element version of jQuery#on ?

Answer 4

It sets up an event delegation; the first is the event, then the child element to target, then the callback.

Question 5

What is the method to fire an event from within code?

Answer 5

jQuery#trigger

Question 6

What is the object that we must define a new jQuery plugin on?

Answer 6

$.fn

Question 7

What is an example of a simple jQuery plugin?

Answer 7

$.fn.greenify = function() {
this.css( “color”, “green” );
return this;
}

$( “a” ).greenify().addClass( “greenified” );

Question 8

How can we prevent collisions with other JS libraries which use $?

Answer 8

Use an IIFE:

(function ( $ ) {

$.fn.greenify = function() {
    this.css( "color", "green" );
    return this;
};

}( jQuery ));

Question 9

What is the best practice when defining methods on .fn?

Answer 9

Define one function on it and overload it to take different numbers/types of arguments.

Question 10

How do we deal with #each?

Answer 10

Return it’s RESULTS (i.e. NOT Ruby!):

$.fn.myNewPlugin = function() {

    return this.each(function() {
        // Do something to each element here.
    });

};

Question 11

How can we set up a function to take what is (essentially) an options hash?

Answer 11

(function ( $ ) {

$.fn.greenify = function( options ) {

        // This is the easiest way to have default options.
        var settings = $.extend({
            // These are the defaults.
            color: "#556b2f",
            backgroundColor: "white"
        }, options );

    // Greenify the collection based on the settings variable.
    return this.css({
        color: settings.color,
        backgroundColor: settings.backgroundColor
    });

};

}( jQuery ));

Question 12

What is a simple jQuery plugin that can show the location of a link?

Answer 12

(function( $ ) {

$.fn.showLinkLocation = function() {

    this.filter( "a" ).append(function() {
        return " (" + this.href + ")";
    });

    return this;

};

}( jQuery ));

Question 13

See an example of a full widget (plugin) file

Answer 13

(function () {
if (typeof NameApp === “undefined”) {
window.NameApp = {};
}

$.NameSearch = function (el) {

this. $el = $(el);
this. $input = this.$el.find("input[name=query]");
this. $ul = this.$el.find("ul.names");

this.$input.on("input", this.render.bind(this));
this.render();   };

$.NameSearch.prototype.searchResults = function () {
return NameApp.Name.search(this.$input.val());
};

$.NameSearch.prototype.render = function () {
this.$ul.empty();

    this.searchResults().forEach((function (name) {
      var $li = $("<li>");
      $li.text(name.fullName());
      this.$ul.append($li);
    }).bind(this));
  };

  $.fn.nameSearch = function () {
    return this.each(function () {
      new $.NameSearch(this);
    });
  }
})();

$(function () {
$(‘.name-search’).nameSearch();
});