事件捕获&事件冒泡简单实例
2020-01-19 本文已影响0人
孙悟空SUN
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>
