change event to use target and relatedTarget (which more closely resembles actual event api)

docs/javascript.html

@@ -368,14 +368,15 @@ $('#my-modal').bind('hidden', function () {
 					  <tbody>
 					   <tr>
 					     <td>change</td>
-					     <td>This event fires on tab change. The event provides an additional parameter which holds the id of the previous tab and the id of the new current tab. This information is stored in an object with two properties called from and to, e.g. <code>{ to: '#home', from: '#profile' }</code>.</td>
+					     <td>This event fires on tab change. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab respectively.</td>
 					   </tr>
 					  </tbody>
 					</table>
 
 					<pre class="prettyprint linenums">
-$('#.tabs').bind('changed', function (e, c) {
+$('#.tabs').bind('change', function (e) {
-  // do something with c.from and c.to ...
+  e.target // activated tab
+  e.relatedTarget // previous tab
 })</pre>
           <h3>Demo</h3>
           <ul class="tabs" data-tabs="tabs" >

js/bootstrap-tabs.js

@@ -27,10 +27,9 @@
 
   function tab( e ) {
     var $this = $(this)
-      , href = $this.attr('href')
       , $ul = $this.closest('ul')
-      , $controlled
+      , href = $this.attr('href')
-      , current = $ul.find('.active a').attr('href')
+      , previous
 
     if (/^#\w+/.test(href)) {
       e.preventDefault()
@@ -39,11 +38,16 @@
         return
       }
 
+      previous = $ul.find('.active a')[0]
       $href = $(href)
 
       activate($this.parent('li'), $ul)
       activate($href, $href.parent())
-      $this.trigger("change", { from: current, to: href })
+
+      $this.trigger({
+        type: 'change'
+      , relatedTarget: previous
+      })
     }
   }
 

js/tests/unit/bootstrap-tabs.js

@@ -51,21 +51,27 @@ $(function () {
           + '<li class="active"><a href="#home">Home</a></li>'
           + '<li><a href="#profile">Profile</a></li>'
           + '</ul>')
-          , changeCount = 0
+          , $target
-          , from
+          , count = 0
-          , to;
+          , relatedTarget
+          , target
 
-        $tabsHTML.tabs().bind( "change", function (e, c){
+        $tabsHTML
-          from = c.from;
+          .tabs()
-          to = c.to;
+          .bind( "change", function (e) {
-          changeCount++
+            target = e.target
+            relatedTarget = e.relatedTarget
+            count++
           })
 
-        $tabsHTML.tabs().find('a').last().click()
+        $target = $tabsHTML
+          .find('a')
+          .last()
+          .click()
 
-        equals(from, "#home")
+        equals(relatedTarget, $tabsHTML.find('a').first()[0])
-        equals(to, "#profile")
+        equals(target, $target[0])
-        equals(changeCount, 1)
+        equals(count, 1)
       })
 
 })