事件冒泡

当事件发生后，这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢？因为事件源本身（可能）并没有处理事件的能力，即处理事件的函数（方法）并未绑定在该事件源上。例如我们点击一个按钮时，就会产生一个click事件，但这个按钮本身可能不能处理这个事件，事件必须从这个按钮传播出去，从而到达能够处理这个事件的代码中（例如我们给按钮的onclick属性赋一个函数的名字，就是让这个函数去处理该按钮的click事件），或者按钮的父级绑定有事件函数，当该点击事件发生在按钮上，按钮本身并无处理事件函数，则传播到父级去处理。

什么是事件冒泡

<!DOCTYPE html>

<html lang="en" onclick="alert('html')">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>

    <title>Document</title>

</head>

<body onclick="alert('body')">

    <!--html-->

    <div style="width:400px; height:400px; background:red" onclick="alert(this.style.background)">

            <div id="div2" style="width:300px; height:300px; background:palevioletred">

                    <div style="width:200px; height:200px; background:yellow" onclick="alert(this.style.background)">

                            <div id="div1" style="width:100px; height:100px; background:palegreen">

                                <a id="aaa" href="http://www.baidu.com">aaa</a>

                            </div>

                    </div>

            </div>

    </div>

    <script>

        //此jquery既阻止默认行为又停止冒泡

        // $("#div1").on('click',function(){

        //     return false;

        // });

        window.onload = function () {

            var oDiv1 = document.getElementById('div1');

            var oDiv2 = document.getElementById('div2');

            oDiv1.onclick = function (ev){

                var oEvent = ev || event;

                alert("this is div1");

                //js阻止事件冒泡

                //oEvent.cancelBubble = true;

                //oEvent.stopPropagation();

                //js阻止链接默认行为，没有停止冒泡

                //oEvent.preventDefault();

                //return false;

            }

            oDiv2.onclick = function (ev){

                var oEvent = ev || event;

                alert("this is div2");

                oEvent.cancelBubble = true;

            }

        }

    </script>

</body>

</html>

js事件冒泡、阻止事件冒泡以及阻止默认行为的更多相关文章

  1. JS阻止事件冒泡

    在使用JS事件的时候,外层元素事件有可能被里层元素的事件触发,例如点击里层元素外层也触发了点击,这种现象称为事件冒泡.(李昌辉) <div id="wai"> < ...

  2. [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播

    -->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...

  3. js 阻止事件冒泡和默认行为 preventDefault、stopPropagation、return false

    preventDefault: preventDefault它是事件对象(Event)的一个方法,作用是取消一个目标元素的默认行为.既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就 ...

  4. js阻止冒泡及jquery阻止事件冒泡示例介绍

    js阻止冒泡 在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容. 复制代码 代码如下: function stopPro(evt){ var e = evt || window ...

  5. js 事件冒泡是什么如何用jquery阻止事件冒泡

    什么是事件起泡:一个事件不能凭空产生,这就是事件的发生等等,接下来为大家介绍下jquery阻止事件起泡以及关于js事件起泡的验证,感兴趣的朋友可以参考下哈       (1)什么是事件起泡 首先你要明 ...

  6. js区分鼠标单双击 阻止事件冒泡

    function clickOrDblClick(obj) { count++; if (obj != undefined) { var rowStr = $.trim($(obj).find(&qu ...

  7. js之阻止事件冒泡(待修改)和阻止默认事件

    阻止默认事件(event.stopPropagation()): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

  8. JS如果阻止事件冒泡和浏览器默认事件

    原地址:http://missra.com/article/web-57.html 嵌套的标签元素,如果父元素和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下J ...

  9. JS阻止事件冒泡的3种方法之间的不同

    什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这 ...

  10. js阻止事件冒泡的两种方法

    1.什么是JS事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这 ...

随机推荐

  1. mybatis逆向工程的text类型的一个小坑

    数据库如果配有text的数据类型的 mybatis生成逆向工程的时候会单独将text提取出来 ByExampleWithBLOBs 会生成上面后缀的查询和修改的语句 因此查询起来会产生没有必要的麻烦, ...

  2. C++入门经典-例5.15-回收动态内存的一般处理步骤

    1:正确的步骤应该是如下代码所示: // 5.15.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostrea ...

  3. asp.net 获取服务器及客户端的相关信息

    1. 在ASP.NET中专用属性:获取服务器电脑名:Page.Server.ManchineName获取用户信息:Page.User获取客户端电脑名:Page.Request.UserHostName ...

  4. 清北学堂2019.8.10 & 清北学堂2019.8.11 & 清北学堂2019.8.12

    Day 5 杨思祺(YOUSIKI) 今天的难度逐渐上升,我也没做什么笔记 开始口胡正解 今天的主要内容是最小生成树,树上倍增和树链剖分 最小生成树 Prim 将所有点分为两个集合,已经和点 1 连通 ...

  5. Windows 10下怎么远程连接 Ubuntu 16.0.4（方案二）

    使用TeamViewer实现远程桌面连接 背景: 有些朋友反映,借助Ubuntu自带的桌面共享工具desktop sharing会有不再同一网端下出现连接不稳定或者掉线的问题,那么现在我们就可以借助第 ...

  6. UniEAP Platform V5.0建库

    create tablespace platform datafile 'platform.dbf' size 100M reuse autoextend on next 50M; . . drop ...

  7. Vmware centos 虚拟机 磁盘扩容

    一,lvm ext4 扩容 1,首先关闭虚拟机,在vSphere Client 将硬盘大小增加或者新增一块硬盘 (从原来10G增加到50G) 2,开机 此时,df -hT只显示原来的磁盘大小 使用 f ...

  8. Nginx Server 上80，443端口。http,https共存

    server{ listen 80; listen 443 ssl; server_name www.iamle.com; index index.html index.htm index.php; ...

  9. vue2创建webpack项目build之后无法正常显示页面的问题

    最近在做vue项目的时候,项目正常运行,但是当我打包上线之后,却出现无法出现页面空白的情况,打开控制台,发现无法加载到css和js文件. 仔细观察发现路径中少了一个dis文件夹,于是我加上dist文件 ...

  10. Unity3D中的SendMessage使用（消息传递的三种方法）

    概述 Unity提供的消息推送机制可以非常方便我们的脚本开发,它实现的是一种伪监听者模式,利用的是反射机制. 常用函数 关于消息推送,常用的函数有三个:”SendMessage“.”SendMessa ...