关于JS的事件捕获与冒泡

原创
2017/07/28 09:52
阅读数 123

事件与事件流

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

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

捕获与冒泡

  • 事件捕获:执行顺序(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>
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部