冒泡

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

　　　　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应用图标及尺寸

    Icon and Image Sizes Every app needs an app icon and a launch file or image. In addition, some apps ...

  2. Cocos Creator scrollview添加事件的两种方法

    scrollview添加事件 方法一这种方法添加的事件回调和使用编辑器添加的事件回调是一样的,通过代码添加, 你需要首先构造一个 cc.Component.EventHandler 对象,然后设置好对 ...

  3. node.js初识04

    node的Get表单提交 form.html <!DOCTYPE html> <html lang="en"> <head> <meta ...

  4. HDU 4686 Arc of Dream(矩阵)

    Arc of Dream [题目链接]Arc of Dream [题目类型]矩阵 &题解: 这题你做的复杂与否很大取决于你建的矩阵是什么样的,膜一发kuangbin大神的矩阵: 还有几个坑点: ...

  5. 基于bootstrap的jQuery多级列表树插件

    简要教程 bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件.该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一 ...

  6. html5-css边框img

    div{    width: 500px;    height: 300px;    background: rgb(122,30,60);    border:15px solid black;   ...

  7. 模拟QQ登录

    2018-10-28 15:54:38 开始写 import javax.swing.JFrame; import javax.swing.JPanel; import javax.swing.bor ...

  8. codeforces 957 A. Tritonic Iridescence

    题意: 给出一个字符串,要求任意两个相同的字母不能相同,问这个字符串是否能有两种或者两种以上的表现形式. 思路: 简单判断一下: 1.问号在端点: 2.连续两个问号或者以上: 3.一个问号两端的字母是 ...

  9. skynet 报错 skynet 服务缺陷 Lua死循环

    我的报错如下: 看起来是skynet中lua死循环,实际上,可能只是本地配置出了问题,比如,我的数据库连接不上了,因为我把别人的配置更新到我本地了,吗,mysql秘密不对 解决办法就是将配置文件中的, ...

  10. sqlmap的使用

    安全测试===sqlmap(壹)转载   六.优化 这些参数可以优化Sqlmap的性能. 1.一键优化 参数:-o 添加此参数相当于同时添加下列三个优化参数: --keep-alive --null- ...