深入分析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 相关文章推荐
基于jquery.Jcrop的头像编辑器
Mar 01 Javascript
JS中window.open全屏命令解析及使用示例
Dec 11 Javascript
JavaScript的21条基本知识点
Mar 04 Javascript
IE中图片的onload事件无效问题和解决方法
Jun 06 Javascript
删除Javascript Object中间的key
Nov 18 Javascript
理解javascript对象继承
Apr 17 Javascript
在AngularJS中使用jQuery的zTree插件的方法
Apr 21 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
Jan 19 Javascript
javascript编程实现栈的方法详解【经典数据结构】
Apr 11 Javascript
微信小程序--组件(swiper)详细介绍
Jun 13 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
Mar 05 Javascript
es6函数之尾调用优化实例分析
Apr 25 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
DISCUZ 论坛管理员密码忘记的解决方法
2009/05/14 PHP
PHP程序员最常犯的11个MySQL错误小结
2010/11/20 PHP
php实现smarty模板无限极分类的方法
2015/12/07 PHP
PHP并发查询MySQL的实例代码
2017/08/09 PHP
Laravel模型间关系设置分表的方法示例
2018/04/21 PHP
python进程与线程小结实例分析
2018/11/11 PHP
javascript之AJAX框架使用说明
2010/04/24 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
2014/09/06 Javascript
js数组如何添加json数据及js数组与json的区别
2015/10/27 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
2016/07/15 Javascript
详解Node.js如何开发命令行工具
2016/08/14 Javascript
jquery append与appendTo方法比较
2017/05/24 jQuery
js表单序列化判断空值的实例
2017/09/22 Javascript
vue 组件中slot插口的具体用法
2018/04/03 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
2018/05/18 Javascript
vue-自定义组件传值的实例讲解
2018/09/18 Javascript
JavaScript实现五子棋游戏的方法详解
2019/07/08 Javascript
JS实现返回上一页并刷新页面的方法分析
2019/07/16 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
2019/08/28 Javascript
linux服务器快速卸载安装node环境(简单上手)
2021/02/22 Javascript
[01:51]2018年度CS GO最具人气外援-完美盛典
2018/12/16 DOTA
[01:46]2020完美世界全国高校联赛秋季赛报名开启
2020/10/15 DOTA
对Python多线程读写文件加锁的实例详解
2019/01/14 Python
使用python实现下载我们想听的歌曲,速度超快
2020/07/09 Python
python 多进程和协程配合使用写入数据
2020/10/30 Python
python中scrapy处理项目数据的实例分析
2020/11/22 Python
什么是Linux虚拟文件系统VFS
2015/08/25 面试题
高三政治教学反思
2014/02/06 职场文书
小学数学国培感言
2014/03/10 职场文书
投资合作协议书范本
2014/04/17 职场文书
2014迎国庆标语大全
2014/09/19 职场文书
药品销售内勤岗位职责
2015/04/13 职场文书
晚会主持人开场白台词
2015/05/28 职场文书
纯html+css实现打字效果
2021/08/02 HTML / CSS
Python办公自动化解决world文件批量转换
2021/09/15 Python
delete in子查询不走索引问题分析
2022/07/07 MySQL