<!DOCTYPE html>
<html>
<head>
<title>event</title>
<style>
html,body{
width: 100%;
height: 100%;
background-color: pink;
}
/* #obj1{
background: pink;
} */
#obj2{
background: saddlebrown;
}
#obj3{
background: darkblue;
}
</style>
</head>
<body>
<div id="obj1">
<h5 id="obj2">hello</h5>
<h5 id="obj3">world</h5>
</div>
<script type="text/javascript">
var obj1=document.getElementById('obj1');
var obj2=document.getElementById('obj2');
var obj3=document.getElementById('obj3');
obj1.addEventListener('click',function(){
alert('最外层的点击');
},false);
obj2.addEventListener('click',function(){
alert('HELLO 的点击');
})
obj3.addEventListener('click',function(){
alert('WORLD 的点击');
})
</script>
</body>
</html>
事件冒泡分析[二]
最新推荐文章于 2020-10-03 17:06:27 发布