冒泡

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

　　　　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 阅读唐巧博客心得

    1. iOS 开发中的争议(一) http://blog.devtang.com/2015/03/15/ios-dev-controversy-1/ 文中提及到,在使用的时候,应该是使用self.pr ...

  2. iOS 开发笔记-控制器翻页

    找了一天,终于找到了两个能用的. 1.https://github.com/wangmchn/WMPageController 2.https://github.com/everettjf/EVTTa ...

  3. iOS UI基础-11.0 UINavigationController

    导航控制器 利用UINavigationController,可以轻松地管理多个控制器,轻松完成控制器之间的切换,典型例子就是系统自带的“设置”应用 UINavigationController的使用 ...

  4. MVC5 您不能调用控制器“xx”上的操作方法“xx”，因为该方法是一种泛型方法

    在 MVC5 中当使用   routes.MapMvcAttributeRoutes() 添加路由属性是导致在控制器创建的泛型方法调用错误: Cannot call action method 'Sy ...

  5. XXE攻击学习

    环境:lAMP simplexml_load_string.php代码内容 <?php $data = file_get_contents('php://input'); $xml = simp ...

  6. Jenkins. 安装过程中出现一个错误： No such plugin: cloudbees-folder

    安装过程中出现一个错误: No such plugin: cloudbees-folder 安装插件,有时候会报类似的错误:An error occurred during installation: ...

  7. HTML5 缓存

    一.在html/htm文件中声明缓存,声明方式: <!DOCTYPE HTML> <html manifest="demo.appcache">...3 & ...

  8. C# 对数据库操作的帮助类SQLHelper.cs

    using System; using System.Collections.Generic; using System.Configuration; using System.Data; using ...

  9. Android -- 仿淘宝广告条滚动

    1,在赶项目的时候我们经常会实现下面这个功能,及添加滚动条广告广播,先看一下淘宝的效果 2,这次实现效果主要使用Android自带的ViewFlipper控件,先来看一下我们的它的基本属性和基本方法吧 ...

  10. 【Hive学习之二】Hive SQL

    环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk8 hadoop-3.1.1 apache-hive-3.1.1 ...