事件冒泡、事件捕获、事件委托初探

 针对这两种情况，W3C在定义dom 事件模型的时候，采取了一个折中的方法。在W3C事件模型中，事件的传播顺序应该从事件捕获阶段为始到事件冒泡阶段结束为终。

                 | |  / 
-----------------| |--| |-----------------
| div1           | |  | |                |
|   -------------| |--| |-----------     |
|   |div2         /  | |          |     |
|   --------------------------------     |
|        W3C 事件模型                      |
------------------------------------------

原生js实现方式

element.addEventListener("事件类型"，“事件处理函数”，“事件顺序”)

事件顺序=true

事件处理函数在捕获阶段执行

事件顺序 =false

事件处理函数在冒泡阶段执行

事件委托

什么是事件委托？利用事件冒泡或者事件捕获原理，如果点击div1，div1自身不处理事件，而是将处理任务委托给父级元素或者祖先元素甚至根节点元素来处理。

<div id="divItem">

    <div class="div1">
        div1
    </div>
    
    <div class="div2">
        div2
    </div>
    
    <div class="div3">
        div3
    </div>
    
</div>



$("#divItem").delegate('div','click',function(e){
    alert($(this).attr('class'))
})