开启辅助访问 充值VIP充值豆豆
QQ登录 自动登录 注册 找回密码
查看: 7488|回复: 0

深入分析js的冒泡事件[javascript教程]

[复制链接]

该用户从未签到

156

主题

156

帖子

2万

豆豆

超级版主

光头春 发表于 2018-11-18 12:23:03 | 显示全部楼层 |阅读模式

在javascript的dom操作做肯定会遇到js的冒泡事件,最常见的是div弹窗事件如图解

当点击灰色部分是弹窗消失,点击黑色部分时没有效果。

通过下面一段代码来分析js的冒泡事件

html代码:

复制代码 代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js冒泡事件</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>js冒泡事件分析</h1>
        <hr>
        <div class="box bg-gray">
            <button class="btn">
                Click me !
            </button>
        </div>
    </div>
    <script>
    var box=document.querySelector(".box"),
    btn=document.querySelector(".btn");
    box.onclick=function(event){
        alert("我是div");
    }
    btn.onclick=function(event){
        alert("我是button");
    }
    </script>
</body>
</html>

使用firefox浏览器的默认开发者工具的3d视图可以清晰的看出div层的先后顺序

图解:

当点击按钮时会弹出“我是button”再弹出“我是div”,因为先触发按钮事件之后触发下一层div点击事件,

事件的触发是先进先出原则。

图解:

那么有些时候我们并不想多个事件的触发而导致冲突,所以event有stopPropagation();方法来阻止冒泡

还有一个event的方法也是比较常用的比如一个链接,点击链接时我不想跳转,则使用event.preventDefault();方法

实例代码如下

复制代码 代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js冒泡事件</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>js冒泡事件分析</h1>
        <hr>
        <div class="box bg-gray">
            <button class="btn">
                Click me !
            </button>
            <a href="http://www.liteng.org" id="link">我是链接</a>
        </div>
    </div>
    <script>
    var box=document.querySelector(".box"),
    btn=document.querySelector(".btn");
    box.onclick=function(event){
        alert("我是div");
    }
    btn.onclick=function(event){
        alert("我是button");
        event.stopPropagation();
    }
    document.getElementById('link').onclick=function(event){
        alert("我是link");
        event.preventDefault();
    }
    /*区分event.stopPropagation();和event.preventDefault();
      前者使用stopPropagation()方法阻止事件冒泡
      后者是阻止默认的行为比如阻止超链接
    */
    </script>
</body>
</html>

小伙伴们是否能够全面理解js的冒泡事件了呢,有疑问就给我留言吧


其它思必达学院教程推荐:
《计算机应用文摘2014年》更新至8月上[PDF] 资料下载
《Internet免费资源检索与利用指南》扫描版[PDF]
《主板维修精华秘籍》扫描版[PDF]
《新手3周学通硬盘芯片级维修》扫描版[PDF]
《阿香婆硬盘维护工具》(Ashampoo HDD Control )v1.12 简体中文/多语言[压缩包]
《僵尸网络:网络程序杀手》(Botnets The Killer Web App)扫描版[PDF]
《计算机组网技术实训教程》文字版[PDF]
《Visual C++网络高级编程》(陈坚&陈伟)[PDF]
《此间》-《仙剑杂志》副刊[EXE]资料下载
《2015年《环球时报》》更新至06.01[rar](国内外杂志最速更新) 资料下载
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

本站资源全部来自网络和网友分享,如有侵犯您的权益,请联系网站QQ,或发邮件至sibida@foxmail.com。本网站尊重知识产权,无意侵犯知识产品,如有,联系网站人员,会第一时间删除!

小白基地,是小白资源网的官方网站,思必达学院官网,提供最新的创业技术支持与创业资讯,提供最新的思必达教程。是IT小白网友学习资源分享基地,中国互助创业资源网。提供诸如JAVA、PHP、MySQL、ASP、C语言等各类程序开发的教程资源。

快速回复 返回顶部 返回列表
鞋子货源 服装货源一件代发 美容护肤品货源