深入分析js的冒泡事件

在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的冒泡事件了呢，有疑问就给我留言吧

赞 (0)

相关推荐

  • js事件冒泡、事件捕获和阻止默认事件详解

    js事件冒泡、事件捕获和阻止默认事件详解

    谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. 1.事件冒泡 先来看一段代码: var $input = document.getElementsByTagName("input")[0]; var $div = document.getElementsByTagName("div")[0]; var $body = document.getElementsByTagName("bo

  • javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结

    javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结

    抽空学习了下javascript和jquery的事件设计,收获颇大,总结此贴,和大家分享. (一)事件绑定的几种方式 javascript给DOM绑定事件处理函数总的来说有2种方式:在html文档中绑定.在js代码中绑定.下面的方式1.方式2属于在html中绑定事件,方式3.方式4和方式5属于在js代码中绑定事件,其中方法5是最推荐的做法. 方式1: HTML的DOM元素支持onclick.onblur等以on开头属性,我们可以直接在这些属性值中编写javascript代码.当点击div的时候,

  • 关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级

    关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级

    假设在我们页面有这么一段标签: 复制代码 代码如下: <body> <div id="testDiv" style="width:200px;height:200px;background:#c0c0c0;"></div> </body> 现在在页面加入这么一段脚本: 复制代码 代码如下: <script type="text/javascript"> window.onload=fun

  • js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件

    1. event.preventDefault();  -- 阻止元素的默认事件. 注:a元素的点击跳转的默认事件 , button,radio等表单元素的默认事件 , div 元素没有默认事件 例: 复制代码 代码如下: <a href="http://www.baidu.com" target="_black">百度</a> 复制代码 代码如下: var samp = document.getElementByTagName("

  • JS冒泡事件与事件捕获实例详解

    本文实例分析了JS冒泡事件与事件捕获.分享给大家供大家参考,具体如下: 案例 <!DOCTYPE html> <html> <head> <title>冒泡事件</title> <script type="text/javascript"> window.onload = function(){ window.onclick = function(){ alert("Window"); // 顶

  • Js冒泡事件详解及阻止示例

    Js冒泡机制是指如果某元素定义了事件A,如click事件,如果触发了事件之后,没有阻止冒泡事件,那么事件将向父级元素传播,触发父类的click函数. 如下例所示: 复制代码 代码如下: <html> <script type="text/javascript" src="jquery-1.7.1.js"></script> <script> function ialertdouble(e) { alert('inner

  • JS冒泡事件的快速解决方法

    何为冒泡事件就是当设定了多个div的嵌套时:即建立了父子关系,当父div与子div共同加入了onclick事件时,当触发了子div的onclick事件后,子div进行相应的js操作.但是父div的onclick事件同样会被触发.这就造成了事件的多层并发,导致了页面混乱.这就是冒泡事件. 消除冒泡事件的方法阻止JavaScript事件冒泡传递(cancelBubble .stopPropagation) 下面的一段代码即可以很好的解释是么是冒泡效果,什么叫消除冒泡效果 复制代码 代码如下: <ht

  • JS阻止冒泡事件以及默认事件发生的简单方法

    如果<p>是在<div>里面,那么呢,<P>有一个onclick事件,<div>也有onclick事件,为了触发<P>的点击事件时,不触发父元素的点击事件,那么就需要调用如下函数: 复制代码 代码如下: function stopBubble(e){  if(e&&e.stopPropagation){//非IE   e.stopPropagation();  }  else{//IE   window.event.cancelB

  • js 冒泡事件与事件监听使用分析

    冒泡事件 js中"冒泡事件(bubble)"并不是能实际使用的花哨技巧,它是一种对js事件执行顺序的机制,"冒泡算法"在编程里是一个经典问题,冒泡算法里面的"冒泡"应该说是交换更加准确:js里面的"冒泡事件"才是真正意义上的"冒泡",它从DOM最低层逐层遍历树,然后附加相应事件.以下面代码为例: 冒泡事件 function Add(sText) { document.getElementById("

  • js事件监听机制(事件捕获)总结

    在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒泡,没有事件监听的机制,对于事件监听的兼容性问题是最大的难题: 1.直接把事件的方法写在页面结构上 function eventfun(){ //console.log(this); } <input type="button" onclick="eventfun()&qu

  • Js 冒泡事件阻止实现代码

    1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览器实现 .jQuery对这个事件对象进行了必要的扩展,从而在任何浏览器中都能够使用这个属性.通过.target,可以确定DOM中首先接收到事件的元素(即实际被单击的元素).而且,我们知道this引用的是处理事件的DOM元素,所以可以编写下列代码: 复制代码 代码如下: $(document).ready(function(

  • js之事件冒泡和事件捕获详细介绍

    js之事件冒泡和事件捕获详细介绍

    (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div -> body -> html -> document Mozilla 1.0: div -> body -> html -> document -> window (2)捕获型事件(event capturing):事件从最不精确的对象(document 对象)开

  • javascript事件冒泡和事件捕获详解

    javascript事件冒泡和事件捕获详解

    事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题. <div id="outer"> <p id="inner">Click me!</p> </div> 上面的代码当中一个div元素当中有一个p子元素,如果两个元素都有一个click的处理函数,那么我们怎么才能知道哪一个函数会首先被触发呢? 为了解决这个问题微软和网景提出了两种几乎完全相反的概念. 事件冒泡 微软提出

随机推荐