有3个阶段

1、  捕获阶段：由外向内，记录各级父元素上绑定的事件处理函数---只记录，不触发。

2、  目标触发：优先触发目标元素上的事件处理函数。

3、  冒泡：由内向外，按捕获的顺序的相反的方向，依次执行父元素上的事件处理函数。

过程如下图所示:

如果希望阻止某些冒泡行为,如表单验证失败时,不允许提交,可以使用e.stopPropagation();取消冒泡:

什么时候使用利用冒泡:

都知道,浏览器通过遍历方式查找事件处理函数执行。如果添加的事件监听越多，遍历越慢，网页响应速度越慢,因此

尽量少的添加事件监听.

如果多个平级子元素绑定相同事件时，可在父元素仅添加一个事件监听，所有子元素共用,并且使用e.target获取目标元素.

下面的代码是一个很经典的理解事件处理的例子:

这里,咱希望的是,点击那个div,那个就变黄,可是如果不加e.stopPropagation的话,在点击d3或d2时,都会冒泡执行其父元素的操作,

比如点击,最里面的d3,上面的d2,d1都会依次变黄.

<!DOCTYPE HTML>

<html>

    <head>

        <title>事件处理</title>

        <meta charset="utf-8"/>

         <style>

            .d1 .d2 .d3{cursor:pointer}

            .d1 {

              background-color: green;

              position: relative;

              width: 150px;

              height: 150px;

              text-align: center;

              cursor: pointer;

            }

            .d2 {

              background-color: blue;

              position: absolute;

              top: 25px;

              left: 25px;

              width: 100px;

              height: 100px;

            }

            .d3 {

              background-color: red;

              position: absolute;

              top: 25px;

              left: 25px;

              width: 50px;

              height: 50px;

              line-height: 50px;

            }

         </style>

    </head>

    <body>

        <div class="d1">

            <div class="d2">

                <div class="d3">

                </div>

            </div>

        </div>

    <script>

            function highLight(e){

        this.style.background="yellow";

        alert(this.className);

        this.style.background="";

        //取消冒泡  如果不加的话,在点击d3或d2时,都会冒泡执行其父元素的操作

        e.stopPropagation();

      }

            document.querySelector(".d1")

        .addEventListener(

          "click",highLight);

      document.querySelector(".d2")

        .addEventListener(

          "click",highLight);

      document.querySelector(".d3")

        .addEventListener(

          "click",highLight);

        </script>

    </body>

</html>

Js事件处理模型/周期的更多相关文章

  1. Tensoflw.js - 02 - 模型与内存管理（易懂）

    Tensoflw.js - 02 - 模型与内存管理(易懂) 参考 W3Cschool 文档:https://www.w3cschool.cn/tensorflowjs/ 本文主要翻译一些英文注释,添 ...

  2. Java NIO 与 基于reactor设计模式的事件处理模型

    Java NIO非堵塞应用通常适用用在I/O读写等方面,我们知道,系统运行的性能瓶颈通常在I/O读写,包括对端口和文件的操作上,过去,在打开一个I/O通道后,read()将一直等待在端口一边读取字节内 ...

  3. js事件处理 —— 详解

    对于JS事件处理分为四部分: 1.html事件处理程序 直接添加到HTML结构中 解析:用html处理程序可以直接在button元素里直接调用,但是维护性不是很方便 <!DOCTYPE html ...

  4. JS线程模型&Web Worker

    js线程模型 客户端javascript是单线程,浏览器无法同时运行两个事件处理程序 设计为单线程的理论是,客户端的javascript函数必须不能运行太长时间,否则会导致web浏览器无法对用户输入做 ...

  5. js盒子模型

    1.js盒子模型 指的是通过js中提供的一系列的属性和方法,获取页面中元素的样式信息值 例: #box有很多自己的私有属性: HTMLDivElement.prototype->HTMLElem ...

  6. JS盒模型

    JS盒模型 ***** 1.width | height parseInt(getComputedStyle(ele, null).getPropertyValue('width')) parseIn ...

  7. 小程序基础知识点讲解-WXML + WXSS + JS，生命周期

    小程序基础 小程序官方地址,小程序开发者工具,点击此处下载.在微信小程序中有一个配置文件project.config.json,此文件可以让开发者在不同设备中进行开发. 微信小程序共支持5种文件,wx ...

  8. 深入浅析Node.js单线程模型

    Node.js采用 事件驱动 和 异步I/O 的方式,实现了一个单线程.高并发的运行时环境,而单线程就意味着同一时间只能做一件事,那么Node.js如何利用单线程来实现高并发和异步I/O?本文将围绕这 ...

  9. js事件处理-整理

    <!-- 作者:gentiana@163.com 时间:2016-3-10 描述:js事件处理 --> <!DOCTYPE html> <html> <hea ...

随机推荐

  1. 『NiFi 学习之路』资源 —— 资料汇总

    一.概述 由于 NiFi 是一个比较新的开源项目,国内的相关资料少之又少. 加之,大家都知道,国内的那么些个教程,原创都只是停留在初级使用阶段,没有更多深入的介绍. 再者,其余的文章不是东抄抄就是西抄 ...

  2. HackerRank - powers-game-1 【博弈论】

    HackerRank - powers-game-1 [博弈论] 题意 给出 * 2^1 * 2^2 * 2^3 * 2^4 * 2^5 * 2^n 这一串东西 ,然后有两个玩家,*号是可以被替换掉的 ...

  3. POJ - 2942 Knights of the Round Table (点双联通分量+二分图判定)

    题意:有N个人要参加会议,围圈而坐,需要举手表决,所以每次会议都必须是奇数个人参加.有M对人互相讨厌,他们的座位不能相邻.问有多少人任意一场会议都不能出席. 分析:给出的M条关系是讨厌,将每个人视作点 ...

  4. 分支语句(switch case)

    /switch case 的应用 Console.WriteLine("1.汉堡包"); Console.WriteLine("2.薯条"); Console. ...

  5. CSS小知识---回到顶部

    所需js文件 <script type="text/javascript" src="js/jquery-1.11.3.js"></scrip ...

  6. Atom常用快捷键及设置

    常用快捷键: cmd-z 修改历史中后退 cmd-y 修改历史中前进 ctl-shift-c 复制该聚焦文件的路径 cmd-/ 注释 shift-cmd-d 复制整行并粘贴到下一行 ctl-shift ...

  7. nginx3

    Yum安装更简单.安装并启动keepalived,表示安装成功.有3个进程. etc\keepalived\keepalived.conf: 备的keepalived配置文件: ! Configura ...

  8. 《Python学习手册》（四）

    List and Dictionary 列表: 任意对象的有序集合 通过偏移读取 可变.异构.任意嵌套 常用方法: L.append(object) L.extend(iterable) L.inse ...

  9. viewport大白话

    以下所有内容均是我自己理解的,可能有误,懂得大佬希望指点一下我.. 首先,写一个简单的页面.里面只有1个200*200的div <html lang="en"> < ...

  10. 在 React Native 中使用 Redux 架构

    前言 Redux 架构是 Flux 架构的一个变形,相对于 Flux,Redux 的复杂性相对较低,而且最为巧妙的是 React 应用可以看成由一个根组件连接着许多大大小小的组件的应用,Redux 也 ...