事件冒泡与事件捕获

事件冒泡：父元素与子元素都绑定了同一事件（如click事件），当鼠标点击子元素时，先触发子元素的click事件，父元素的click事件也随之一起触发。
如：

<div class="wrapper" style="width: 200px;height:200px;background-color:red">
    <div class="content" style="width: 100px;height:100px;background-color:green"></div>
</div>
<script>
    var wrapper = document.getElementsByClassName('wrapper')[0];
    var content = document.getElementsByClassName('content')[0];
    
    wrapper.addEventListener('click', function () {
        console.log('wrapper');
    }, false);
    content.addEventListener('click', function () {
        console.log('content');
    }, false);
</script>

(1)、当点击wrapper区域时，控制台会打印出wrapper；
(2)、当点击content区域时，控制台会先打印出content，在打印出wrapper（子元素content的事件冒泡给父元素wrapper）。

.
事件捕获：与事件冒泡相反，父元素与子元素都绑定了同一事件（如click事件），当鼠标点击子元素时，会先触发父元素上的click事件，再触发子元素上的click事件。
绑定事件方法addEventListener的第三个参数为true时，即为事件捕获。
如：

<div class="wrapper" style="width: 200px;height:200px;background-color:red">
    <div class="content" style="width: 100px;height:100px;background-color:green"></div>
</div>
<script>
    var wrapper = document.getElementsByClassName('wrapper')[0];
    var content = document.getElementsByClassName('content')[0];
    
    wrapper.addEventListener('click', function () {
        console.log('wrapper');
    }, true);  // 为true表示事件捕获
    content.addEventListener('click', function () {
        console.log('content');
    }, true);  // 为true表示事件捕获
</script>

(1)、当点击wrapper区域时，控制台会打印出wrapper；
(2)、当点击content区域时，控制台会先打印出wrapper，在打印出content。

.
注：事件冒泡与事件捕获是指父元素的事件触发顺序，子元素为事件的触发。
如点击事件click：
事件冒泡时，先触发子元素的点击事件，随后将改时间冒泡给父元素。
事件捕获时，父元素先捕获点击事件，随后子元素触发点击事件。

当父元素和子元素上既有事件冒泡又有事件捕获时，会先触发事件捕获再触发事件冒泡。
如：

<div class="wrapper" style="width: 200px;height:200px;background-color:red">
    <div class="content" style="width: 100px;height:100px;background-color:green"></div>
</div>
<script>
    var wrapper = document.getElementsByClassName('wrapper')[0];
    var content = document.getElementsByClassName('content')[0];
    
    wrapper.addEventListener('click', function () {
        console.log('事件冒泡wrapper');  //content的父元素，事件冒泡形式触发
    }, false);
    content.addEventListener('click', function () {
        console.log('事件冒泡content');  //content元素，click事件形式触发，触发顺序按照代码先后顺序触发
    }, false);

    wrapper.addEventListener('click', function () {
        console.log('事件捕获wrapper');  //content的父元素，事件捕获形式触发
    }, true);
    content.addEventListener('click', function () {
        console.log('事件捕获content');  //content元素，click事件形式触发，触发顺序按照代码先后顺序触发
    }, true);
</script>

(1)、点击wrapper区域时，控制台会先打印“事件冒泡wrapper”，在打印“事件捕获wrapper”。
(2)、点击content区域时，控制台先打印“事件捕获wrapper’”，再打印“事件冒泡content”，再打印“事件捕获content”，最后打印“事件冒泡wrapper”。

.
取消事件冒泡：
e.stopPropagation()：W3C标准，IE9以下不支持
e.cancelBubble = true ：IE浏览器专用

<div class="wrapper" style="width: 200px;height:200px;background-color:red">
    <div class="content" style="width: 100px;height:100px;background-color:green"></div>
</div>
<script>
    var wrapper = document.getElementsByClassName('wrapper')[0];
    var content = document.getElementsByClassName('content')[0];
    
    wrapper.addEventListener('click', function () {
        console.log('wrapper');
    }, false);
    content.addEventListener('click', function (e) {
        e.cancelBubble = true;
        e.stopPropagation();
        console.log('content');
    }, false);
</script>

(1)、当点击wrapper区域时，控制台会打印出wrapper；
(2)、当点击content区域时，控制台只打印出content。