深入分析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 相关文章推荐
JavaScript 存在陷阱 删除某一区域所有节点
May 10 Javascript
JavaScript在多浏览器下for循环的使用方法
Nov 07 Javascript
jquery查找父元素、子元素(个人经验总结)
Apr 09 Javascript
JS+DIV+CSS实现的经典标签切换效果代码
Sep 14 Javascript
AngularJS基础 ng-open 指令简单实例
Aug 02 Javascript
JavaScript实现刷新不重记的倒计时
Aug 10 Javascript
AngularJS中的缓存使用
Jan 11 Javascript
vue.js将时间戳转化为日期格式的实现代码
Jun 05 Javascript
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
Vue中Table组件Select的勾选和取消勾选事件详解
Mar 19 Javascript
浅析vue-router实现原理及两种模式
Feb 11 Javascript
详解vue中v-model和v-bind绑定数据的异同
Aug 10 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实现源代码加密的方法
2015/07/11 PHP
网页的分页下标生成代码(PHP后端方法)
2016/02/03 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
PHP中字符与字节的区别及字符串与字节转换示例
2016/10/15 PHP
javascript里的条件判断
2007/02/27 Javascript
prototype Element学习笔记(篇一)
2008/10/26 Javascript
json-lib出现There is a cycle in the hierarchy解决办法
2010/02/24 Javascript
JS跨域代码片段
2012/08/30 Javascript
Jquery事件的连接使用示例
2013/06/18 Javascript
extjs每个组件要设置唯一的ID否则会出错
2014/06/15 Javascript
通过实例理解javascript中没有函数重载的概念
2015/06/03 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
2015/08/05 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
2015/12/10 Javascript
基于vue的下拉刷新指令和滚动刷新指令
2016/12/23 Javascript
JavaScript装饰器函数(Decorator)实例详解
2017/03/30 Javascript
jQuery获取复选框选中的当前行的某个字段的值
2017/09/15 jQuery
Angular HMR(热模块替换)功能实现方法
2018/04/04 Javascript
JavaScript生成一个不重复的ID的方法示例
2019/09/16 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
2020/10/01 Javascript
python3.7 openpyxl 删除指定一列或者一行的代码
2019/10/08 Python
TensorFLow 不同大小图片的TFrecords存取实例
2020/01/20 Python
Python对wav文件的重采样实例
2020/02/25 Python
python实现计算器简易版
2020/12/17 Python
.NET remoting的两种通道是什么
2016/05/31 面试题
医学毕业生自我鉴定
2013/10/30 职场文书
医院实习接收函
2014/01/12 职场文书
环保建议书
2014/03/12 职场文书
祖国在我心中的演讲稿
2014/05/04 职场文书
店长岗位职责
2015/02/11 职场文书
庆祝教师节活动总结
2015/03/23 职场文书
新教师2015年度工作总结
2015/07/22 职场文书
2016年中秋节慰问信
2015/12/01 职场文书
员工安全责任协议书
2016/03/22 职场文书
selenium.webdriver中add_argument方法常用参数表
2021/04/08 Python
python文本处理的方案(结巴分词并去除符号)
2021/05/26 Python
使用JS实现简易计算器
2021/06/14 Javascript