分为三大阶段：捕获阶段--目标阶段--冒泡阶段

事件代理简单说就是：事件不直接绑定到某元素上，而是绑定到该元素的父元素上，进行触发事件操作时(例如'click')，再通过条件判断，执行事件触发后的语句(例如'alert(e.target.innerHTML)')

好处：(1)使代码更简洁；(2)节省内存开销

DOM 事件有哪些阶段？谈谈对事件代理的理解的更多相关文章

  1. 深入理解DOM事件机制系列第三篇——事件对象

    × 目录 [1]获取 [2]事件类型 [3]事件目标[4]事件代理[5]事件冒泡[6]事件流[7]默认行为 前面的话 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事 ...

  2. 谈谈JavaScript事件

    众所周知,web前端包含三个基本技术:html.css和javascript.三者融合,才让网页变得精彩纷呈!如今,web上的操作越来越趋于复杂,JavaScript事件在网页中也遍地开花,有时候也是 ...

  3. 探讨Js的事件的冒泡阶段

    近来看到了一个新的知识点叫Js的事件冒泡,因此决定自己来研究一番. 大家应该都知道,Js中的事件处理分为三个阶段,1:事件的捕获阶段,2:处于目标阶段,3:事件的冒泡阶段.那么什么是事件的捕获和冒泡呢 ...

  4. 深入理解DOM事件机制系列第四篇——事件模拟

    × 目录 [1]引入 [2]模拟机制 [3]自定义事件 前面的话 事件是网页中某个特别的瞬间,经常由用户操作或通过其他浏览器功能来触发.但实际上,也可以使用javascript在任意时刻来触发特定的事 ...

  5. 深入理解DOM事件类型系列第一篇——鼠标事件

    × 目录 [1]类型 [2]顺序 [3]坐标位置[4]修改键[5]相关元素[6]鼠标按键[7]滚轮事件[8]移动设备 前面的话 鼠标事件是web开发中最常用的一类事件,毕竟鼠标是最主要的定位设备.本文 ...

  6. [译]谈谈SpringBoot 事件机制

    要"监听"事件,我们总是可以将"监听器"作为事件源中的另一个方法写入事件,但这将使事件源与监听器的逻辑紧密耦合. 对于实际事件,我们比直接方法调用更灵活.我们可 ...

  7. jqgrid 谈谈给表格设置列头事件、行事件、内容事件

    往往我们需要给显示的jqgrid表格赋予事件功能,比如:列头事件.行事件.内容事件.需要的效果可能如下: 如你所见,以上的超链接和按钮均是绑定的事件.那分别如何实现这些事件的绑定呢? 一.行事件 行事 ...

  8. 每日分享！～ JavaScript中面试基础--1，数组检测的方式 2.传统事件绑定和W3C标准绑定事件的区别～

    javaScript 那些方式中检测数据类型 typeof typeof isNaN // 结果是function 检测数组的几种方式 instanceof arr instanceof Array( ...

  9. JS事件冒泡机制和兼容性添加事件

    本篇文章主要来讲讲 事件的冒泡机制 和 添加事件的几种方法. 一. JS的时间传递顺序: 捕获阶段 -> 目标阶段 -> 冒泡阶段 捕获阶段是指从父层往子层找.比如 <body> ...

  10. javascript中事件总结&通用的事件侦听器函数封装&事件委托

    前言: JAVASCRIPT与HTML之间的交互是通过事件来实现的.事件,就是文档或浏览器窗口中发生的一些特定交互瞬间.可以使用侦听器( 或处理程序 )来预定事件,以便事件发生时执行相应的代码.这种在 ...

随机推荐

  1. CentOS6和7启动流程

    CentOS6启动流程 https://linux.cn/article-8807-1.html BIOS 开机自检,硬件自检 MBR MBR磁盘分区是一种使用最为广泛的分区结构,它也被称为DOS分区 ...

  2. 个性化召回算法实践(二)——LFM算法

    LFM算法核心思想是通过隐含特征(latent factor)联系用户兴趣和物品,找出潜在的主题和分类.LFM(latent factor model)通过如下公式计算用户u对物品i的兴趣: \[ P ...

  3. 《奋斗吧！菜鸟》 第七次作业：团队项目设计完善&编码

    项目 内容 这个作业属于哪个课程 任课教师链接 作业要求 https://www.cnblogs.com/nwnu-daizh/p/10980707.html 团队名称 奋斗吧!菜鸟 作业学习目标 团 ...

  4. VueRouter基础

    安装 直接下载(官方CDN) https://unpkg.com/vue-router/...通过页面script标签引入,如下: <script src='https://unpkg.com/ ...

  5. 多线程下,使用new实现单例

    import threading class Test(object): from threading import Lock lock = Lock() flag = None def __new_ ...

  6. [NOI2008]假面舞会 （搜索+gcd）

    题意 LuoguP1477 题解 对于每一条边(u,v)(u,v)(u,v),建两条边(u→v,1),(v→u,−1)(u\to v,1),(v\to u,-1)(u→v,1),(v→u,−1).跑b ...

  7. DevTool-Network

    如图所示,图中蓝线表示DOMContentLoaded事件触发时经过的时间,DOM树构建花费的时间. 图中红线表示onload事件触发时经过的时间,也是所有的资源(图片等)下载处理完成的时间. 图中绿 ...

  8. Neo4j 快速清除数据库数据

    在开发过程中,很多时候需要快(简)速(单)清(粗)除(暴)Neo4j中存在的海量数据节点和关系数据.在这种情况下,delete和detach从性能上都已力不从心.Neo4j官方推荐清库方法,即删除gr ...

  9. learning scala extractor object

    package com.aura.scala.day01 import scala.util.Random object extractorObject { def main(args: Array[ ...

  10. 监控ntp进程的

    !#/bin/bash ntp_num=$[`ps -ef|grep ntp|wc -l`-1] if [ $ntp_num == 1 ];then echo 0 else echo $ntp_num ...