原生js的事件冒泡和默认事件

最新推荐文章于 2024-05-12 21:38:39 发布

wuliangfan

最新推荐文章于 2024-05-12 21:38:39 发布

阅读量234

点赞数

分类专栏：原生JS

本文链接：https://blog.csdn.net/wuliangfan/article/details/96427902

版权

原生JS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

事件冒泡：html元素是嵌套结构，在触发内层元素的事件时，外部事件也会被由内到外触发，这种现象叫做事件冒泡
阻止冒泡事件： e.stopPropagation();
默认事件： a标签的跳转事件就是默认事件
阻止默认事件： e.preventDefault();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
        <style>
        .div1{
            width:400px;
            height:400px;
            border:1px solid black;
        }
        .div2{
            width:300px;
            height:300px;
            border:1px solid black;
        }
        .div3{
            width:200px;
            height:200px;
            border:1px solid black;
        }
        .div4{
            width:100px;
            height:100px;
            border:1px solid black;
        }
    </style>
</head>
<body>
    <!-- 事件冒泡：实现点击哪个div，控制台打印哪个div的class类名 -->
    <div class="div1" onclick="xianshi('div1',event)">
        <div class="div2" onclick="xianshi('div2',event)">
            <div class="div3" onclick="xianshi('div3',event)">
                <div class="div4" onclick="xianshi('div4',event)"></div>
            </div>
        </div>
    </div>

    <!-- 默认事件:实现触发后面的xianshi方法，但页面不进行跳转 -->
    <a href="https://www.baidu.com" onclick=xianshi("a标签",event)>a标签的默认事件</a>

    <script type="text/javascript">   
        function xianshi(name,e){
            console.log(name);
            e.stopPropagation();
            e.preventDefault();
        }
    </script>
</body>

wuliangfan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js的事件冒泡和默认事件

事件冒泡：html元素是嵌套结构，在触发内层元素的事件时，外部事件也会被由内到外触发，这种现象叫做事件冒泡阻止冒泡事件： e.stopPropagation(); 默认事件： a标签的跳转事件就是默认事件阻止默认事件： e.preventDefault();<!DOCTYPE html><html lang="en"><head> &l...
复制链接

扫一扫