事件监听的冒泡和捕捉[转载]

事件捕捉

捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。

事件冒泡

冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

捕获和冒泡过程图

捕捉和冒泡是相反的。

捕获和冒泡过程图

事件捕获和事件冒泡属于两个相反的过程，这里可以有一个我感觉十分恰当的比喻，当你把一个可以漂浮在水面上的物品，使劲向水里砸下去，它会首先有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程；之后由于浮力大于物体自身的重力，物体会在到达最低点（ 最具体元素）之后漂浮到水面上，这个过程相对于事件捕获是一个回溯的过程，即事件冒泡。

实例

    


    

        welcome
        
hello
        
world
    
    

如上所示，这是一个十分简单地文档结构：document > html > body > div > h5。

并且分别在obj1,obj2上绑定了一个点击事件，由于addEventListener的第三个参数为false,所以页面是在冒泡阶段处理绑定事件。此时整个页面可以有三种行为出现:

注意：
事件的第三个参数为ture/false
true:捕捉。结合上图可以理解为正序。
false:冒泡。结合上图理解为逆序。

• 点击文字welcome时，弹出hello。
  此时就只触发了绑定在obj1上的点击事件。具体冒泡实现过程如下：welcome属于文本节点，点击后，开始从文本节点查找，当前文本节点没有绑定点击事件，继续向上找，找到父级（id为obj1的div），有绑定的点击事件，执行，再向上找，body，没有绑定点击事件，再到html,document,都没再有绑定的点击事件，好，整个冒泡过程结束。

• 点击文字hello时，先弹出world，再弹出hello。

  
  
  image.png

• 点击world时，弹出hello。

  
  
  image.png

实例2

举个例子。 ul 下面很多 li, 点击li,输出 li 的文字。循环每个li 添加点击事件不是很好的选择。 可以把点击事件写在 ul 上，点击 li ，事件会冒泡到 ul, 这样只用写一个事件。

参考文章

终于弄懂了事件冒泡和事件捕获！