事件捕获—>事件处理—>事件冒泡

zenkle

于 2019-06-13 18:48:13 发布

阅读量328

点赞数

分类专栏： javascript 前端

本文链接：https://blog.csdn.net/qq_35142645/article/details/91869575

版权

事件冒泡：当子元素与父元素有相同的事件时，当子元素被触发时父元素也会被触发冒泡机制

点击子——弹出父

<!DOCTYPE html>
<html>
<head>
    <title>1</title>
    <meta charset="UTF-8">
    
</head>
<body>
    <div id="div1">父
       <div id="div2">子</div>
    </div>
</body>
</html>
<script type="text/javascript">
    let Div1=document.getElementById('div1');
    let Div2=document.getElementById('div2');
    Div1.addEventListener("click",function(){console.log("父");},false);
    Div2.addEventListener("click",function(){console.log("子");},false);
</script>

阻止冒泡


<!DOCTYPE html>
<html>
<head>
    <title>1</title>
    <meta charset="UTF-8">
    
</head>
<body>
    <div id=&

最低0.47元/天解锁文章

zenkle

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
事件捕获—>事件处理—>事件冒泡

事件冒泡：当子元素与父元素有相同的事件时，当子元素被触发时父元素也会被触发冒泡机制点击子——弹出父<!DOCTYPE html><html><head> <title>1</title> <meta charset="UTF-8"> </head><body>...
复制链接

扫一扫

专栏目录