diff --git a/order.yml b/order.yml index 031ed663..b1c853a4 100644 --- a/order.yml +++ b/order.yml @@ -43,6 +43,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. + +``` +
    + +
    ​ +``` + +### [.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 `