首先要说事件委托，那麽必须要明白两个概念，一个是冒泡事件一个是捕获事件，以下是捕获事件与冒泡事件的代码打印，点击span子元素，首先引发事件捕获事件，触发顺序从最外层的元素开始，逐步前往内层，直到达到实际点击触发的元素，然后触发事件结束，开始事件冒泡，事件冒泡与捕获正好相反，从元素内部开始，逐步冒泡到元素的最外层。

什么是事件委托：通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件

原理: 利用冒泡的原理，把事件加到父级上，触发执行效果。

target 事件属性可返回事件的目标节点（触发 该事件的节点） // Firefox/Chrome/Opera/Safari

1

srcElement 事件属性可返回事件的目标节点（触发该事件的节点）// ie

兼容问题：

oUl.onmouseover = function(ev){

    var ev = ev || window.event;

    var target = ev.target || ev.srcElement;

    if(target.nodeeName.toLowerCase() == "li"){

        target.style.background = "red";

    }

}

DOM事件流（event flow ）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。

事件捕获（event capturing）：通俗的理解就是，当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。

事件冒泡（dubbed bubbling）：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。

无论是事件捕获还是事件冒泡，它们都有一个共同的行为，就是事件传播，它就像一跟引线，只有通过引线才能将绑在引线上的鞭炮（事件监听器）引爆，试想一下，如果引线不导火了，那鞭炮就只有一响了！！！

事件冒泡和时间捕捉：

上述代码给child和parent元素都设置了点击事件，并且都是采用的事件冒泡机制。

1.当点击child元素时，先触发child的点击事件，再触发parent的点击事件，打印相应的内容；

2.当点击parent元素时，只触发parent的点击事件，因为parent元素冒泡上去没有dom元素设置了click事件的函数；

阻止冒泡事件：

方法：

stopPropagation()阻止事件播；//Firefox/Chrome/Opera/Safari

cancelBubble = true 阻止事件传播； // ie

1

2

3

阻止冒泡兼容处理：

function stopPropagation(e){

    e = e || window.event;

    if(e.stopPropagaton){

        // Firefox/Chrome/Opera/Safari

        e.stopPropagation();

    }else{

        e.cancelBubble = true; //ie

    }

}

阻止浏览器默认行为

方法

preventDefault() //Firefox/Chrome/Opera/Safari

returnValue = false //ie

兼容处理：

function stopPropagation(e){

    e = e || window.event;

    if(e.preventDefault){

        // Firefox/Chrome/Opera/Safari

    }else{

        e.returnValue = false; //ie

    }

}

事件代理（event delegation）：事件代理又称事件委托，是javaScript中绑定事件的常用技巧。顾名思义，‘事件代理’就是把原本需要绑定的事件委托给父元素，让父元素负责事件监听。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好处是可以提高性能

首先要说事件委托，那麽必须要明白两个概念，一个是冒泡事件一个是捕获事件，以下是捕获事件与冒泡事件的代码打印，点击span子元素，首先引发事件捕获事件，触发顺序从最外层的元素开始，逐步前往内层，直到达到实际点击触发的元素，然后触发事件结束，开始事件冒泡，事件冒泡与捕获正好相反，从元素内部开始，逐步冒泡到元素的最外层。

好了，理解了冒泡事件和捕获事件后，那再理解什么是事件委托，借用一个用的很广泛的例子：有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。

事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。

一般绑定事件的写法

$(function(){

    $ali = $('#list li');

    $ali.click(function(event) {

        $(this).css({background:'red'});

    });

})

   

• 1

   

• 2

   

• 3

   

• 4

   

• 5

事件委托的写法

$(function(){

    $list = $('#list');

    $list.delegate('li', 'click', function(event) {

        $(this).css({background:'red'});

    });

})

   

• 1

   

• 2

   

• 3

   

• 4

   

• 5

取消事件委托

// ev.delegateTarge 委托对象

$(ev.delegateTarge).undelegate();

// 上面的例子可使用 $list.undelegate();

首先要说事件委托，那麽必须要明白两个概念，一个是冒泡事件一个是捕获事件，以下是捕获事件与冒泡事件的代码打印，点击span子元素，首先引发事件捕获事件，触发顺序从最外层的元素开始，逐步前往内层，直到达到实际点击触发的元素，然后触发事件结束，开始事件冒泡，事件冒泡与捕获正好相反，从元素内部开始，逐步冒泡到元素的最外层。

好了，理解了冒泡事件和捕获事件后，那再理解什么是事件委托，借用一个用的很广泛的例子：有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。

首先要说事件委托，那麽必须要明白两个概念，一个是冒泡事件一个是捕获事件，以下是捕获事件与冒泡事件的代码打印，点击span子元素，首先引发事件捕获事件，触发顺序从最外层的元素开始，逐步前往内层，直到达到实际点击触发的元素，然后触发事件结束，开始事件冒泡，事件冒泡与捕获正好相反，从元素内部开始，逐步冒泡到元素的最外层。

好了，理解了冒泡事件和捕获事件后，那再理解什么是事件委托，借用一个用的很广泛的例子：有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。

事件委托也称之为事件代理（Event Delegation）。是JavaScript中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定在子元素的响应事件委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。

举个通俗的例子：比如一个宿舍的同学同时快递到了，一种方法就是他们一个个去领取，还有一种方法就是把这件事情委托给宿舍长，让一个人出去拿好所有快递，然后再根据收件人一 一分发给每个宿舍同学；
在这里，取快递就是一个事件，每个同学指的是需要响应事件的 DOM 元素，而出去统一领取快递的宿舍长就是代理的元素，所以真正绑定事件的是这个元素，按照收件人分发快递的过程就是在事件执行中，需要判断当前响应的事件应该匹配到被代理元素中的哪一个或者哪几个。

一个事件触发后，会在子元素和父元素之间传播（propagation）。这种传播分成三个阶段。
（1）捕获阶段：从window对象传导到目标节点（上层传到底层）称为“捕获阶段”（capture phase），捕获阶段不会响应任何事件；
（2）目标阶段：在目标节点上触发，称为“目标阶段”
（3）冒泡阶段：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”（bubbling phase）。事件代理即是利用事件冒泡的机制把里层所需要响应的事件绑定到外层。