深入分析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 实现Tab效果 思路是js思路
Mar 02 Javascript
javascript setTimeout()传递函数参数(包括传递对象参数)
Apr 07 Javascript
JS判断是否为数字,是否为整数,是否为浮点数的代码
Apr 24 Javascript
js替换字符串的所有示例代码
Jul 23 Javascript
js语法学习之判断一个对象是否为数组
May 13 Javascript
详解vue的数据binding绑定原理
Apr 12 Javascript
js + css实现标签内容切换功能(实例讲解)
Oct 09 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
Feb 15 Javascript
layui实现数据表格table分页功能(ajax异步)
Jul 27 Javascript
RxJS在TypeScript中的简单使用详解
Apr 13 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
Apr 20 Javascript
Vue toFixed保留两位小数的3种方式
Oct 23 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处理文件的小例子(解压缩,删除目录)
2013/02/03 PHP
PHP启动windows应用程序、执行bat批处理、执行cmd命令的方法(exec、system函数详解)
2014/10/20 PHP
JavaScript在IE中“意外地调用了方法或属性访问”
2008/11/19 Javascript
使用js操作css实现js改变背景图片示例
2014/03/10 Javascript
简单的js图片轮换代码(js图片轮播)
2014/05/06 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
JavaScript不刷新实现浏览器的前进后退功能
2014/11/05 Javascript
js和C# 时间日期格式转换的简单实例
2016/05/28 Javascript
jQuery数组处理函数整理
2016/08/03 Javascript
json与jsonp知识小结(推荐)
2016/08/16 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
javascript 面向对象function详解及实例代码
2017/02/28 Javascript
Angular中ng-bind和ng-model的区别实例详解
2017/04/10 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
2017/10/13 jQuery
jquery实现侧边栏左右伸缩效果的示例
2017/12/19 jQuery
jQuery实现列表的增加和删除功能
2018/06/14 jQuery
js如何获取访问IP、地区、当前操作浏览器
2019/07/23 Javascript
WEEX环境搭建与入门详解
2019/10/16 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
[05:09]DOTA2-DPC中国联赛2月22日Recap集锦
2021/03/11 DOTA
初步理解Python进程的信号通讯
2015/04/09 Python
Python中Iterator迭代器的使用杂谈
2016/06/20 Python
Python针对给定列表中元素进行翻转操作的方法分析
2018/04/27 Python
TensorFlow 滑动平均的示例代码
2018/06/19 Python
Python实现爬虫抓取与读写、追加到excel文件操作示例
2018/06/27 Python
Python+selenium 获取浏览器窗口坐标、句柄的方法
2018/10/14 Python
Python列表元素删除和remove()方法详解
2021/01/04 Python
使用HTML5在网页中嵌入音频和视频播放的基本方法
2016/02/22 HTML / CSS
清扬洗发水广告词
2014/03/14 职场文书
项目合作协议书范本
2014/04/16 职场文书
电子工程求职信
2014/07/17 职场文书
公民代理授权委托书
2014/09/24 职场文书
幼儿园大班开学寄语(2015秋季)
2015/05/27 职场文书
生产设备维护保养制度
2015/08/06 职场文书
如何在centos上使用yum安装rabbitmq-server
2021/03/31 Servers
PYTHON使用Matplotlib去实现各种条形图的绘制
2022/03/22 Python