JS事件冒泡和事件捕获-学习笔记

一直没有搞懂这两个东西，今天看到vue的视频，又遇到了，还是决定自己来理一理。

一、事件冒泡

废话少说，先贴段代码，感受一下什么是事件冒泡。

HTML部分：

<div id="grandpa">
    grandpa
    <div id="father">
        father
        <div id="child">
            child
            <button id="me">me</button>
        </div>
    </div>
</div>

CSS部分（只是为了看起来方便，没有实用性，看效果就好了）：

    <style>
        #grandpa{
            padding-left: 5px;
            width: 100px;
            height: 100px;
            background-color: #BDF5E6;
        }
        #father{
            padding-left: 5px;
            width: 80px;
            height: 80px;
            background-color: #60F8CF;
        }
        #child{
            padding-left: 5px;
            width: 60px;
            height: 60px;
            background-color: #05F8B6;
        }
        #me{
            background-color: #077262;
        }
    </style>

JS部分：

<script>
    document.getElementById('grandpa').addEventListener('click',function (e) {
        console.log('grandpa事件被触发'+'-'+e.target.id)
    })
    document.getElementById('father').addEventListener('click',function (e) {
        console.log('father事件被触发'+'-'+e.target.id)
    })
    document.getElementById('child').addEventListener('click',function (e) {
        console.log('child事件被触发'+'-'+e.target.id)
    })
    document.getElementById('me').addEventListener('click',function (e) {
        console.log('me事件被触发'+'-'+e.target.id)
    })
</script>

点击结果：

    

结论：事件的触发顺序me-child-me-grandpa，自内向外的，即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播。这就是事件冒泡。

注意：这里的事件对象（回调函数里的参数e），指向的是鼠标直接点击的元素的事件对象。那如何获取各自对象的id值呢?直接在回调函数里用this.id就好啦。

 阻止冒泡：

Jquery的e.stopPropagation会阻止冒泡（直接写在回调函数里就OK了），意思就是到我为止，我的爹和祖宗的事件就不要触发了。

二、事件捕获

事件冒泡明白了。这里就上结论。

事件捕获是先由最上一级的节点先接收事件，然后向下传播到具体的节点。这和事件冒泡是相反的。

绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。true,事件捕获；false,事件冒泡。默认false,即事件冒泡。

上JS代码：

<script>
    document.getElementById('grandpa').addEventListener('click',function (e) {
        console.log('grandpa事件被触发'+'-'+e.target.id)
    },true)
    document.getElementById('father').addEventListener('click',function (e) {
        console.log('father事件被触发'+'-'+e.target.id)
    },true)
    document.getElementById('child').addEventListener('click',function (e) {
        console.log('child事件被触发'+'-'+e.target.id)
    },true)
    document.getElementById('me').addEventListener('click',function (e) {
        console.log('me事件被触发'+'-'+e.target.id)
    },true)
</script>

结果：

结论：事件触发顺序grandpa-father-child-me，自外向内的。即先由最上一级的节点先接收事件，然后向下传播到具体的节点。

三、DOM事件流

 "DOM2级事件”规定的事件流包含三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，然后是实际的目标接收到事件，最后阶段是冒泡阶段。以上面的HTML页面为例，单击<div>元素将按照下图触发事件：

 

感受一下：JS代码（我们将grandpa和child放在捕获阶段，father和me放在冒泡阶段）：

<script>
    document.getElementById('grandpa').addEventListener('click',function (e) {
        console.log('grandpa事件被触发'+'-'+e.target.id)
    },true)
    document.getElementById('father').addEventListener('click',function (e) {
        console.log('father事件被触发'+'-'+e.target.id)
    },false)
    document.getElementById('child').addEventListener('click',function (e) {
        console.log('child事件被触发'+'-'+e.target.id)
    },true)
    document.getElementById('me').addEventListener('click',function (e) {
        console.log('me事件被触发'+'-'+e.target.id)
    },false)
</script>

结果：

结果：先触发的是捕获阶段的事件，所以上诉结论成立。

                                                                         <--学习笔记，如有错误欢迎指正。-->

参考：http://www.cnblogs.com/linxuehan/p/3623760.html