一、JavaScript事件流：

JavaScript与HTML之间的交互是通过事件实现的。事件即是文档或浏览器窗口中发生的一些特定的交互瞬间。DOM事件标准定义了两种事件流：事件捕获和事件冒泡。

对于事件捕获，事件的处理将从DOM层次的根开始，而不是从触发事件的目标元素开始，事件被从目标元素的所有祖先元素依次往下传递。在这个过程中，事件会被从文档根到事件目标元素之间各个继承派生的元素所捕获。

而事件冒泡是当事件在某一DOM元素被触发时，例如用户在客户名字节点上点击鼠标，事件将跟随着该节点继承自的各个父节点冒泡穿过整个的DOM节点层次，直到它遇到依附有该事件类型处理器的节点

二、jQuery事件委托：

jQuery的事件委托就是利用事件冒泡的原理，通过把事件绑定到目标元素的父级元素上，从而借助一个元素上的事件处理程序完成多个工作。

如以下代码为HTML的一部分：

    <canvas class="movie_picture" style="" width="210" height="140"></canvas>
    <canvas class="movie_picture" style="" width="210" height="140"></canvas>
    <canvas class="movie_picture" style="" width="214" height="140"></canvas>
    <canvas class="movie_picture" style="" width="210" height="140"></canvas>
    <canvas class="movie_picture" style="" width="210" height="140"></canvas>
    <canvas class="movie_picture" style="" width="210" height="140"></canvas>
    <canvas class="movie_picture" style="" width="214" height="140"></canvas>
    <canvas class="movie_picture" style="" width="214" height="140"></canvas>
    <canvas class="movie_picture" style="" width="210" height="140"></canvas>
</section>

要为以上每个canvas定义click事件，用一般的事件绑定方法去实现肯定有些繁琐，特别是在ajax动态获取数据的情况下会很麻烦。而且当canvas元素很多时会带来严重的性能问题。

jQuery的事件委托方法（delegate）就可以很好的解决这个问题，如以下代码所示：

function() {
    ...//do something.
});

delegate方法语法如下：

   $(selector).delegate(childSelector,event,data,function)

       其中childSelector为要附加事件处理程序的一个或多个子元素；

       event为附加到元素的一个或多个事件；

       data为传递到函数的额外数据（可选）；

       function为事件发生时运行的函数。

这样就可以把'canvas'的click事件绑定'#thumbs_container'，且在把'canvas'作为第一个参数的情况下，delegate()方法会把this关键字映射为'#thumbs_container'中与该选择符匹配的元素。