From 2edc5ffbc87fed81656bd3e022e16f0ed38ac414 Mon Sep 17 00:00:00 2001 From: Aaron Date: Tue, 16 Oct 2012 16:19:25 -0400 Subject: [PATCH 1/3] resolves #129 --- order.yml | 1 + page/events/history-of-events.md | 125 +++++++++++++++++++++++++++++++ 2 files changed, 126 insertions(+) create mode 100644 page/events/history-of-events.md diff --git a/order.yml b/order.yml index 9c067170..f311a356 100644 --- a/order.yml +++ b/order.yml @@ -45,6 +45,7 @@ - working_with_events_part_2 - triggering-event-handlers - introduction-to-custom-events + - history-of-events - effects: - built-in-effects - custom-effects diff --git a/page/events/history-of-events.md b/page/events/history-of-events.md new file mode 100644 index 00000000..c988251b --- /dev/null +++ b/page/events/history-of-events.md @@ -0,0 +1,125 @@ +--- +title : History of jQuery Events +--- +Throughout the evolution of jQuery the means of event binding has changed for various reasons ranging from performance to semantics. As of jQuery v1.7 the `.on()` method is the accepted means of both directly binding events and creating delegated events. This article aims to explore the history of *event delegation* from jQuery v1.0 - present and how each version leverages it. + +Given the following html, for our example we want to log the text of the each `
  • ` to console whenever it is clicked. + +``` +
    +
      +
    • Item #1
      • +
    • Item #2
      • +
    • Item #3
      • +
    • ...
      • +
    • Item #100
      • +
    +
    ​ +``` + +### [.bind()](http://api.jquery.com/bind/) (Deprecated) +Introduced in jQuery v1.0 + +It is possible to use `.bind()` and attach a handler to every element. + +``` +​$('#list li').bind('click', function(event){ + console.log( $elem.text() ); +});​​​​​​​​​​​​​​​​​​​​​ +``` +As discussed in the [event delegation](/event/event-delegation) article, this is not optimal. + +### liveQuery +*liveQuery* was a popular jQuery plugin, that allowed for the creation of events which would be triggered for elements that existed now or in the future. This plugin did not use event delegation is used expensive CPU processing to poll the DOM for changes every 20ms and fire events accordingly. + + +### [.bind()](http://api.jquery.com/bind/) delegation (Deprecated) +Introduced in jQuery v1.0 + +Generally we don't associate `.bind()` with *event delegation*, however prior to jQuery v1.3 it was the only means of delegation available to us. + +``` +​$('#list').bind('click', function(event){ + var $elem = $(event.target); + if( $elem.is("li") ){ + console.log( $elem.text() ); + } +});​​​​​​​​​​​​​​​​​​​​​ +``` +We are able to take advantage of *event bubbling* here by attaching a *click* event to the parent `