美文网首页前端知多少
事件捕获&事件冒泡简单实例

事件捕获&事件冒泡简单实例

作者: 孙悟空SUN | 来源:发表于2020-01-19 16:48 被阅读0次
v2-ef867362710a15032746fe53856fd8ef_1200x500.jpg
<html>
<head></head>
<body>
<div id="div1" style="background: blue;width: 100px; height: 100px;">
        <div id="div2" style="background: red;width: 70px; height: 70px;">
            <div id="div3" style="background: yellow;width: 50px; height: 50px;"></div>
        </div>
    </div>
    <script>
    var oDvi1 = document.getElementById('div1'),
    oDvi2 = document.getElementById('div2'),
    oDvi3 = document.getElementById('div3');


// 123 -> 456 -> 345
oDvi1.addEventListener('click', xx1, true);
oDvi2.addEventListener('click', xx2, false);
oDvi3.addEventListener('click', xx3, true);


function xx1(){ //蓝
    alert(123);
}

function xx2(){ //红
    alert(345);
}

function xx3(){//黄
    alert(456);
}
    </script>
</body>
</html>

相关文章

网友评论

    本文标题:事件捕获&事件冒泡简单实例

    本文链接:https://www.haomeiwen.com/subject/xagrzctx.html