Bootstrap事件用法

<div ID = "myCarousel" class = "carousel slIDe">

   <!-- Carousel indicators -->
   <ol class = "carousel-indicators">
      <li data-target = "#myCarousel" data-slIDe-to = "0" class = "active"></li>
      <li data-target = "#myCarousel" data-slIDe-to = "1"></li>
      <li data-target = "#myCarousel" data-slIDe-to = "2"></li>
   </ol>   

   <!-- Carousel items -->
   <div class = "carousel-inner">
      <div class = "item active">
         <img src = "/bootstrap/images/slIDe1.png" alt = "First slIDe">
      </div>

      <div class = "item">
         <img src = "/bootstrap/images/slIDe2.png" alt = "Second slIDe">
      </div>

      <div class = "item">
         <img src = "/bootstrap/images/slIDe3.png" alt = "Third slIDe">
      </div>
   </div>

   <!-- Carousel nav -->
   <a class = "carousel-control left" href = "#myCarousel" data-slIDe = "prev">&lsaquo;</a>
   <a class = "carousel-control right" href = "#myCarousel" data-slIDe = "next">&rsaquo;</a>
</div> 

<script>
   $(function() {
      $('#myCarousel').on('slIDe.bs.carousel', function () {
         alert("This event fires immediately when the slIDe instance method" +"is invoked.");
      });
   });
</script>