冒泡

事件触发后事件流的三个阶段按顺序依次是：

　　　　1、捕获阶段

　　　　2、目标阶段

　　　　3、冒泡阶段

大盒子包裹小盒子，两个盒子都分别添加点击事件，当点击小盒子，两个盒子的事件都会触发。

事件委托

下级元素委托上级元素，将子孙元素的事件注册委托给父级元素来代理：

　　　　1、给父元素注册点击事件

　　　　2、在事件函数中通过（ 事件对象.target ）获取最先触发的元素（ 这就是需要被操作的子元素 ）

　　　　3、通过 nodeName 检测是点击了子元素还是点到了父元素上

事件对象的  公共属性 和 方法

属性：

　　　　事件对象.target　　→ →　　获取最先触发的元素

方法：

　　　　事件对象.preventDefault() ； 阻止默认行为（ 有兼容性 ）

　　　　事件对象.stopPropagation() ； 停止冒泡

重点

1、onmouseover支持冒泡

2、onmouseenter不支持冒泡

栗子

<!DOCTYPE html>

<html lang="en">

<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">

  <title>Document</title>

  <style>

    .box1 {

      width: 500px;

      height: 500px;

      background: pink;

      margin:0 auto;

      overflow: hidden;

    }

    .box2 {

      width: 400px;

      height: 350px;

      background: yellow;

      margin: 50px auto;

      overflow: hidden;

    }

    .box3 {

      width: 300px;

      height: 200px;

      background: deeppink;

      margin: 50px auto;

    }

  </style>

</head>

<body>

  <div class="box1">box1

    <div class="box2">box2

      <div class="box3">box3 点击里面的盒子会冒泡到外面的盒子</div>

    </div>

  </div>

  <script>

      // click事件栗子

    var box1 = document.querySelector('.box1');

    box1.onclick = function(){

        alert('添加在box1上的事件');

    }

    // onmouseover事件栗子

    var box1 = document.querySelector('.box1');

    box1.onmouseover = function(){

        console.log('添加在box1上的事件');

    }

  </script>

</body>

</html>
<!DOCTYPE html>

<html>

<head>

    <style>

        div {

            width: 100px;

            height: 100px;

            margin: 100px auto;

            padding: 30px;

            text-align: center;

            background-color: rgba(255, 192, 203, 0.466);

        }

        p {

            width: 200px;

            height: 40px;

            line-height: 40px;

            background-color: deeppink;

        }

    </style>

</head>

<body>

    <h5>将鼠标移动到上面两个方块上</h5>

    <h5>父元素添加了 onmouseover 事件，子元素未添加，但是当鼠标滑过子元素，也同样会触发事件</h5>

    <div onmouseover="myOverFunction()">父

        <p id="demo">子</p>

    </div>
    <i>此栗子参考链接：https://blog.csdn.net/u012309349/article/details/50885149</i>

    <script>

        x = 0;

        function myOverFunction() {

            document.getElementById("demo").innerHTML = x += 1;

        }

    </script>

</body>

</html>

JavaScript中冒泡与事件委托的更多相关文章

  1. JavaScript事件冒泡和事件委托

    JavaScript事件冒泡和事件委托 付建宇 - 2 条评论 接触JavaScript不久,学的东西也不是特别多.小雨就是习惯把平时学到的东西拿出来分享.一方面加强自己的印象,一方面可以让自己的经验 ...

  2. 在javascript中如何取消事件冒泡

    如果在javascript中只希望事件发生在它的目标而不是在它的父元素上,即取消它的冒泡事件的发生,该如何做?因为按照javascript发生事件的顺序,它由两个阶段:分别从根元素--父元素--目标元 ...

  3. 【JavaScript】事件捕获、事件冒泡与事件委托

    2018年12月18日 最近在学习js时,遇到了三个名词:事件捕获.事件冒泡.事件委托. 一.事件捕获和事件冒泡 事件捕获和事件冒泡是为了解决网页中的事件流(事件发生的顺序)而提出的概念. 事件捕获是 ...

  4. JS中的事件绑定，事件捕获，事件冒泡以及事件委托，兼容IE

    转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4864367.html   ● 事件分为三个阶段:   事件捕获 -->  事件目标 -->   ...

  5. JavaScript进阶系列06,事件委托

    在"JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件,事件参数"中已经有了一个跨浏览器的事件处理机制.现在需要使用这个 ...

  6. Dom基础（三）:事件冒泡，事件委托（事件代理）和事件捕获

    javascript中的addEventListener(事件名,回调,布尔) 其中第三个参数默认为false-事件冒泡,true为事件捕获 二者区别: 事件冒泡:目标元素事件先触发,然后父元素事件触 ...

  7. 事件绑定，事件捕获，事件冒泡以及事件委托，兼容IE

    ● 事件分为三个阶段:   事件捕获 -->  事件目标 -->  事件冒泡 ● 事件捕获:事件发生时(onclick,onmouseover……)首先发生在document上,然后依次传 ...

  8. javascript的事件冒泡,阻止事件冒泡和事件委托， 事件委托是事件冒泡的一个应用。

    首先,弄明白js 当中,什么是事件,事件模型在js中是如何设计的.什么是事件冒泡? 什么是“事件冒泡”呢?假设这里有一杯水,水被用某种神奇的方式分成不同颜色的几层.这时,从最底层冒出了一个气泡,气泡会 ...

  9. JavaScript面试问题：事件委托和this

            JavaScript不仅门槛低,而且是一门有趣.功能强大和非常重要的语言.各行各业的人发现自己最混乱的选择是JavaSscript编程语言.由 于有着各种各样的背景,所以不是每个人都对 ...

随机推荐

  1. iOS UI基础-14.0 DatePicker

    DatePicker的主要属性: Mode:显示的内容,可以选择日期.时间的自由组合 Locale:显示的语言样式 Interval:每个选项的时间间隔 Date:当前选择的时间 Constraint ...

  2. LocalStorage存储和cookie存储

    localStorage是H5的新特性,主要用来本地存储,一般浏览器支持的大小是5M,不同浏览器会有所不同,解决了cookie存储空间不足的问题. 2.使用:     ⑴.存 if(!window.l ...

  3. ssdb使用笔记

    ssdb是一款类似于redis的nosql数据库,不过redis是基于内存的,服务器比较昂贵,ssdb则是基于硬盘存储的,很容易扩展,对于一些对速度要求不是太高的应用,还是不错的选择. 先记录一个比较 ...

  4. jQuery-animate万能动画效果

    问题:效果受局限 解决:万能动画函数:animate() animation()可对数值类型的CSS样式执行定时器动画 包括:宽高,位置,透明度,边框宽度,字体大小 强调:不能对非数值类型属性做动画 ...

  5. 获取Sqlserver上一句语句执行后受影响的行数@@rowCount

    from:http://blog.163.com/rihui_7/blog/static/212285143201381343240404/ 返回受上一语句影响的行数. ROWCOUNT_BIG.&q ...

  6. java空心菱形

    图 1 要输出如图1所示的菱形,第一反应是看看这个菱形有什么特点.在草稿纸上比划了半天,将图1转化成了图2用数字表示的图 图 2 比较图1和图2发现有以下特点: (1)图2中的每一个数字代表图1中每个 ...

  7. caffe训练脚本文件时遇到./build/tools/caffe: not found

    原文转载:https://blog.csdn.net/zhongshaoyy/article/details/53502373 cifar10训练步骤如下: (1)打开终端,应用cd切换路径,如 cd ...

  8. Unity shader学习之菲涅耳反射

    菲涅尔反射(Fresnel reflection),指光线照射物体表面时,一部分发生反射,一部分进入物体内部发生折射或散射,被反射的光和折射光之间存在一定的比率. 2个公式: 1. Schlick 菲 ...

  9. ruby中的alias和alias_method

    ruby中的alias和alias_method都可以重命名一个方法,它们的区别如下: 1.alias是ruby的一个关键字,因此使用的时候是alias :newname :oldname alias ...

  10. [13]Windows 内核情景分析 --- 网络通信

    典型的基于tcpip协议套接字方式的网络通信模块层次: 应用程序 socket api WS2_32.dll socket irp Afd.sys tdi irp Tcpip.sys 回调函数接口 各 ...