js事件再解析

从别人空间摘得http://www.cnblogs.com/yexiaochai/p/3567597.html (强烈建议阅读本文前先看下这篇文章)

这一个例子看懂了 就基本都搞清楚了

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #p { width: 300px; height: 300px; padding: 10px;  border: 1px solid black; }
        #c { width: 200px; height: 200px; border: 1px solid red; }
        #sub { width: 100px; height: 100px; border: 1px solid red; }
    </style>
</head>
<body>
<div id="p">
    parent
    <div id="c">
        child
        <div id="sub">
            sub

        </div>
    </div>
</div>
<script type="text/javascript">

    window.alert = function (msg) {
        console.log(msg);
    };

    var p = document.getElementById('p'),
            c = document.getElementById('c'),
            sub = document.getElementById('sub');

    sub.addEventListener('click', function (e) {
        alert('sub节点冒泡');

    }, false);

    sub.addEventListener('click', function (e) {
        alert('sub节点捕获')

    }, true);

    p.addEventListener('click', function (e) {
        alert('父节点捕获11')

        //e.cancelBubble= true;

    }, true);

    p.addEventListener('click', function (e) {
        alert('父节点冒泡')
    }, false);

    c.addEventListener('click', function (e) {
        alert('子节点捕获');

    }, true);

    c.addEventListener('click', function (e) {
        alert('子节点冒泡');
        //e.stopPropagation();
    }, false);

    p.addEventListener('click', function (e) {
        alert('父节点捕获')

    }, true);

</script>
</body>
</html>

其中不管是捕获/处于/冒泡 那个阶段, 向组织事件进一步传播 统一用event.stopPropagation();

ps:奇葩微软的e.cancleBubble= true 测试在ie9以上已经没用了,ie9以上也可以用event.stopPropagation();了

ps2:e.cancleBubble 容易给人造成误解,以为它只是专门用来组织冒泡的!实际上它阻止的事事件三个阶段!!!!

 

接下来又尝试 让所有事件都不捕获呢?

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #p { width: 300px; height: 300px; padding: 10px;  border: 1px solid black; }
        #c { width: 200px; height: 200px; border: 1px solid red; }
        #sub { width: 100px; height: 100px; border: 1px solid red; }
    </style>
</head>
<body>
<div id="p">
    parent
    <div id="c">
        child
        <div id="sub">
            sub

        </div>
    </div>
</div>
<script type="text/javascript">

    window.alert = function (msg) {
        console.log(msg);
    };

    var p = document.getElementById('p'),
            c = document.getElementById('c'),
            sub = document.getElementById('sub');

    sub.addEventListener('click', function (e) {
        alert('sub节点冒泡');

    }, false);

    sub.addEventListener('click', function (e) {
        alert('sub节点捕获')

    }, false);

    p.addEventListener('click', function (e) {
        alert('父节点捕获11')

        //e.cancelBubble= true;

    }, false);

    p.addEventListener('click', function (e) {
        alert('父节点冒泡')
    }, false);

    c.addEventListener('click', function (e) {
        alert('子节点捕获');

    }, false);

    c.addEventListener('click', function (e) {
        alert('子节点冒泡');
        //e.stopPropagation();
    }, false);

    p.addEventListener('click', function (e) {
        alert('父节点捕获')

    }, false);

</script>
</body>
</html>

结果事:

 

在一种情况:如果上面有一个遮罩呢?  三个嵌套的盒子会产生事件吗

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #p { width: 300px; height: 300px; padding: 10px;  border: 1px solid black; }
        #c { width: 200px; height: 200px; border: 1px solid red; }
        #sub { width: 100px; height: 100px; border: 1px solid red; }
        .float-left{
            position: absolute;
            left: 0;
            top: 0;
            width: 150px;
            height: 100px;
            padding: 10px;
            background-color: royalblue;
            border: 1px solid black;
            opacity:.5;
        }
    </style>
</head>
<body>
<div id="p">
    parent
    <div id="c">
        child
        <div id="sub">
            sub

        </div>
    </div>
</div>

<div class="float-left">
    我会定位了哦~~~
</div>
<script type="text/javascript">

    window.alert = function (msg) {
        console.log(msg);
    };

    var p = document.getElementById('p'),
            c = document.getElementById('c'),
            sub = document.getElementById('sub');

    sub.addEventListener('click', function (e) {
        alert('sub节点冒泡');

    }, false);

    sub.addEventListener('click', function (e) {
        alert('sub节点捕获')

    }, false);

    p.addEventListener('click', function (e) {
        alert('父节点捕获11')

        //e.cancelBubble= true;

    }, false);

    p.addEventListener('click', function (e) {
        alert('父节点冒泡')
    }, false);

    c.addEventListener('click', function (e) {
        alert('子节点捕获');

    }, false);

    c.addEventListener('click', function (e) {
        alert('子节点冒泡');
        //e.stopPropagation();
    }, false);

    p.addEventListener('click', function (e) {
        alert('父节点捕获')

    }, false);

</script>
</body>
</html>

 

 答案:点击在遮罩上则没有任何事件产生!!

下面事遮罩上有事件的情况  三个嵌套的盒子会产生事件吗

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #p { width: 300px; height: 300px; padding: 10px;  border: 1px solid black; }
        #c { width: 200px; height: 200px; border: 1px solid red; }
        #sub { width: 100px; height: 100px; border: 1px solid red; }
        .float-left{
            position: absolute;
            left: 0;
            top: 0;
            width: 150px;
            height: 100px;
            padding: 10px;
            background-color: royalblue;
            border: 1px solid black;
            opacity:.5;
        }
    </style>
</head>
<body>
<div id="p">
    parent
    <div id="c">
        child
        <div id="sub">
            sub

        </div>
    </div>
</div>

<div class="float-left">
    我会定位了哦~~~
</div>
<script type="text/javascript">

    window.alert = function (msg) {
        console.log(msg);
    };

    var p = document.getElementById('p'),
            c = document.getElementById('c'),
            sub = document.getElementById('sub');

    sub.addEventListener('click', function (e) {
        alert('sub节点冒泡');

    }, false);

    sub.addEventListener('click', function (e) {
        alert('sub节点捕获')

    }, false);

    p.addEventListener('click', function (e) {
        alert('父节点捕获11')

        //e.cancelBubble= true;

    }, false);

    p.addEventListener('click', function (e) {
        alert('父节点冒泡')
    }, false);

    c.addEventListener('click', function (e) {
        alert('子节点捕获');

    }, false);

    c.addEventListener('click', function (e) {
        alert('子节点冒泡');
        //e.stopPropagation();
    }, false);

    p.addEventListener('click', function (e) {
        alert('父节点捕获')

    }, false);

    var fleft= document.querySelector('.float-left');
    fleft.addEventListener('click', function (e) {
        alert('fleft捕获')
    }, true);
    fleft.addEventListener('click', function (e) {
        alert('fleft冒泡')
    }, false);

</script>
</body>
</html>

在点击时候发现:

只有它自己的两个事件产生!!三个嵌套的盒子不会产生事件

所以可以总结:事件的分阶段传播,是当有 盒子嵌套时候才会发生!!我们这个fleleft元素 内层没有元素,外层为body,所有不会影响那三个嵌套的盒子!

 

 

 

别人的博客链接:http://www.cnblogs.com/yexiaochai/p/3567597.html

 

posted @ 2017-01-17 22:53  _白马非马  阅读(239)  评论(0编辑  收藏  举报