冒泡

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

　　　　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. 解读经典面试题for循环console.log

    for (var i = 1; i <= 5; i++) { setTimeout(function () { console.log(i) },1000)} 会打印出5个6,这是why 因为 ...

  2. sqli-labs(十八)

    第五十五关:和上一关类似,只是拼凑的方法不一样,所以需要先判断后台是怎么拼凑的 分别输入id=1'--+         id=1"--+             id=') --+     ...

  3. javaweb + tomcat + 部署 + 域名绑定 + 默认首页

    ①:把javaweb项目打包成war(不会的自行百度) ②:把war拷贝到服务器的tomcat里面的webapps下 ③:到bin文件夹下.bat文件启动tomcat,启动后会解压war包 ⑤:解压后 ...

  4. quartz demo01

    1,Pom.xml   加入:quartz-2.1.7.jar <dependency> <groupId>org.quartz-scheduler</groupId&g ...

  5. Oracle / PLSQL函数 - LENGTH和LENGTHB

    1.LENGTH( string1 ) 2.LENGTHB( string1 ) 在oracle中,这两个函数都有差不多意思,最大的区别在于:length 求得是字符长度,lengthb求得是字节长度 ...

  6. <1>lua编译环境 数据类型和局部变量

    1.编译环境 http://www.lua.org/download.html下载 解压后 bin目录中lua.exe运行   luac.exe编译成lua字节码 2.基本数据类型 整数,小数,布尔值 ...

  7. Vue系列之 => 全局，私有过滤器

    私有过滤器也称局部过滤器 <script> // 全局过滤器 Vue.filter("datatime",function(timestr){ var tm = new ...

  8. sitecore系统教程之媒体库

    您可以管理媒体库中的所有媒体项目,例如要嵌入网页的图像或供访问者下载的图像.媒体库包含所有媒体项目,例如图像,文档,视频和音频文件. 在媒体库中,您可以: 将所有媒体文件保存在一个位置,并将其组织在与 ...

  9. 主流的Nosql数据库的对比

    主流的Nosql数据库的对比    MongoDB,Cassandra,CouchDB,Hypertable, Redis,Riak,Neo4j,Hadoop HBase, Couchbase,Mem ...

  10. c# 定义委托和使用委托（事件的使用）

    使用委托时要先实例化,和类一样,使用new关键字产生委托的新实例,然后将一个或者多个与委托签名匹配的方法与委托实例关联.随后调用委托时,就会调用所有与委托实例关联的方法. 与委托关联可以是任何类或者结 ...