冒泡

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

　　　　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. Selenium基础知识(八)文本域处理textarea

    textarea文本域selenium有时处理不了,但是我们可以采用迂回,解决这个问题 那么,我们用到了execute_script()方法来调用javascript来解决这个问题 这其中涉及DOM, ...

  2. SQL 2008安装过程（转）

    这几天因为需要,一直想安装SQL Server 2008来作为Web后台的数据库进行些实验,但总是没有时间,今天终于有时间了,便安装了SQL Server 2008,以下是我的安装的步骤,希望对于有需 ...

  3. 通过Response下载。

    之前一直在找js下载的插件,后来发现下载必须通过java后台处理,什么write(),open(),close()之类的方法.如果直接是通过<a>标签倒是简单的,直接将路径摆放在上面就可以 ...

  4. Linux rz命令无效

    rz命令无效 我习惯使用SecureCRT工具,进行远程连接Linux服务器,在进行文件传输的时候,可以使用sftp (alt+p)方式进行传输文件,也经常使用rz命令进行图形化的方式传输文件. 当r ...

  5. Lambda表达式语法

    基础语法:‘->’Lambda操作符* 左侧:Lambda表达式的参数列表 对应接口中方法中的参数列表中的参数(比如nice1中MyPredict这个接口中的方法)* 右侧:Lambda表达式中 ...

  6. Nginx查看并发链接数

    一.通过界面查看通过web界面查看时Nginx需要开启status模块,也就是安装Nginx时加上 --with-http_stub_status_module 一.通过界面查看 通过web界面查看时 ...

  7. Eclipse + Pydev问题 ： pydev unresolved import

    http://blog.csdn.net/qq_22765745/article/details/71054030http://blog.csdn.net/amghost/article/detail ...

  8. 转：php 5.5源码安装全过程

    下载 PHP 源码包 # wget http://cn2.php.net/distributions/php-5.5.15.tar.bz2 # tar xf php-5.5.15.tar.bz2 -C ...

  9. SolidWorks242个使用技巧

    1 您可以使用 CTRL+TAB 键循环进入在 SolidWorks 中打开的文件. 2 使用方向键可以旋转模型.按 CTRL 键加上方向键可以移动模型.按 ALT 键加上方向键可以将模型沿顺时针或逆 ...

  10. Toolkit tool 获取屏幕、显示在屏幕中心

    2018-11-11  15:30:05开始写 Toolkit tool = Toolkit.getDefaultToolkit(); Dimension d = tool.getScreenSize ...