关于JS的事件捕获与冒泡

事件与事件流

事件，是文档或浏览器窗口发生的一些特定的交互事件。事件流，描述的是页面中接收事件的顺序。

默认情况下，事件使用冒泡事件流，不使用捕获事件流。

捕获与冒泡

事件捕获：执行顺序(document->html->body->div)
事件冒泡：执行顺序(div->body->html->document)
IE < 9：只支持事件冒泡
IE 9+|chrome|firefox|safari：事件冒泡+事件捕获

阻止捕获与冒泡

event.stopPropagation()

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #outer {
            display: block;
            width: 300px;
            height: 300px;
            background-color: red;
        }

        #middle {
            display: block;
            width: 200px;
            height: 200px;
            background-color: green;
        }

        #inner {
            display: block;
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="outer">
        outer
        <div id="middle">
            middle
            <div id="inner">
                inner
            </div>
        </div>
    </div>
</div>

<script>
    var outer = document.getElementById('outer');
    var middle = document.getElementById('middle');
    var inner = document.getElementById('inner');

    outer.addEventListener('click', function (event) {
        console.log('outer-->事件捕获');
        // 阻止事件捕获，内层不会再捕获到事件
        // event.stopPropagation();
    }, true);
    middle.addEventListener('click', function (event) {
        console.log('middle-->事件捕获');
    }, true);
    inner.addEventListener('click', function (event) {
        console.log('inner-->事件捕获');
    }, true);
    inner.addEventListener('click', function (event) {
        console.log('inner-->事件冒泡');
    }, false);
    middle.addEventListener('click', function (event) {
        console.log('middle-->事件冒泡');
        // 阻止事件冒泡，外层不会再捕获到事件
        // event.stopPropagation();
    }, false);
    outer.addEventListener('click', function (event) {
        console.log('outer-->事件冒泡');
    }, false)
</script>
</body>
</html>