深入分析js的冒泡事件


Posted in Javascript onDecember 05, 2014

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

深入分析js的冒泡事件

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

通过下面一段代码来分析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层的先后顺序

深入分析js的冒泡事件

图解:

深入分析js的冒泡事件

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

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

图解:

深入分析js的冒泡事件

那么有些时候我们并不想多个事件的触发而导致冲突,所以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的冒泡事件了呢,有疑问就给我留言吧

Javascript 相关文章推荐
IE FF OPERA都可用的弹出层实现代码
Sep 29 Javascript
js removeChild 障眼法 可能出现的错误
Oct 06 Javascript
Jquery获得控件值的三种方法总结
Feb 13 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
Aug 24 Javascript
JavaScript中const、var和let区别浅析
Oct 11 Javascript
Vue中保存用户登录状态实例代码
Jun 07 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
JavaScript模板引擎原理与用法详解
Dec 24 Javascript
vue强制刷新组件的方法示例
Feb 28 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
Mar 06 Javascript
JS数组中对象去重操作示例
Jun 04 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
Feb 06 Javascript
Javascript解析URL方法详解
Dec 05 #Javascript
jQuery不兼容input的change事件问题解决过程
Dec 05 #Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
Dec 05 #Javascript
jQuery前端框架easyui使用Dialog时bug处理
Dec 05 #Javascript
Javascript实现获取窗口的大小和位置代码分享
Dec 04 #Javascript
Javascript 中创建自定义对象的方法汇总
Dec 04 #Javascript
dreamweaver 8实现Jquery自动提示
Dec 04 #Javascript
You might like
PHP输出XML到页面的3种方法详解
2013/06/06 PHP
ThinkPHP使用心得分享-上传类UploadFile的使用
2014/05/15 PHP
php生成gif动画的方法
2015/11/05 PHP
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
2007/08/08 Javascript
IE6下js通过css隐藏select的一个bug
2010/08/16 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
2011/02/11 Javascript
JS中Iframe之间传值的方法
2013/03/11 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
2014/01/02 Javascript
Js获取下拉框选定项的值和文本的实现代码
2014/02/26 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
javascript轻量级模板引擎juicer使用指南
2014/06/22 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
2015/03/14 Javascript
JQuery Mobile 弹出式登录框的实现方法
2016/05/28 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
2017/03/02 Javascript
vuex学习之Actions的用法详解
2017/08/29 Javascript
原生js实现密码强度验证功能
2020/03/18 Javascript
vue实现移动端input上传视频、音频
2020/08/18 Javascript
在Python中使用lambda高效操作列表的教程
2015/04/24 Python
Python正则表达式教程之二:捕获篇
2017/03/02 Python
python中利用队列asyncio.Queue进行通讯详解
2017/09/10 Python
numpy.meshgrid()理解(小结)
2019/08/01 Python
浅析python表达式4+0.5值的数据类型
2020/02/26 Python
通过Python实现Payload分离免杀过程详解
2020/07/13 Python
Python hashlib模块的使用示例
2020/10/09 Python
详解Python中的文件操作
2021/01/14 Python
MIXIT官网:俄罗斯最大的化妆品公司之一
2020/01/25 全球购物
Ado与Ado.net的相同与不同
2014/12/08 面试题
澳大利亚商务邀请函
2014/01/17 职场文书
美德少年事迹材料500字
2014/08/19 职场文书
入党积极分子学习优秀共产党员先进事迹思想汇报
2014/09/13 职场文书
村长反四风问题个人对照检查材料
2014/09/21 职场文书
学生检讨书怎么写?
2014/10/10 职场文书
2015年出纳个人工作总结
2015/04/02 职场文书
linux下安装redis图文详细步骤
2021/12/04 Redis
5人制售《绝地求生》游戏外挂获利500多万元 被判刑
2022/03/31 其他游戏