DOM-8 【兼容】冒泡捕获流、事件与事件源对象、事件委托

最新推荐文章于 2021-11-05 15:56:05 发布
最新推荐文章于 2021-11-05 15:56:05 发布
阅读量149 收藏
点赞数
分类专栏： 系统学习 # DOM
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43503511/article/details/117726930
版权

事件流

1. 含义

  • 描述从页面中接收事件的顺序

2. 分类

  1. IE提出的 事件冒泡流 Event Bubbling
  2. Netscape提出的 事件捕获流 Event Capturing

3. 阶段

  • 事件捕获阶段

  • 处于目标阶段

  • 事件冒泡阶段

  • 事件捕获先于事件冒泡执行
    在这里插入图片描述

dom

  • dom0：定义句柄方式，兼容性最好
  • dom1：没有事件相关定义
  • dom2：addEventListener / removeEventListener W3C规范

事件对象e / window.event

1. W3C标准

  • e：事件触发后的详细信息，传到事件处理函数的参数里
  • 是由MouseEvent构造函数构造的

在这里插入图片描述

2. IE

  • 作为window的属性：window.event，不再传到事件处理函数的参数里

事件源（对象）

  • 在事件对象里可获取到srcElement和target：事件源对象
  • 火狐只有target
  • IE只有srcElement
  • chrome都有
  • 【兼容】

在这里插入图片描述

oDiv.onclick = function (e) {
   
    var e = e || window.event,
        tar =
最低0.47元/天 解锁文章
Stephy_Yy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM事件流，冒泡 | 捕获 | 委托 ，详解
01-08
目录（一）DOM事件流① 定义② 图解③ 历史（二）冒泡（三）捕获（四）在不同的阶段执行事件（五）提高内存和性能 — 事件委托① 实例② 优点 （一）DOM事件流 ① 定义 DOM事件流包括三个阶段： 捕获阶段 目标阶段 ...
dom啦8 DOM事件
qq_37805832的博客
09-05 499
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <button>我是按钮</button> <a href="http://www.it666.com">我是a标签</a> <script type="text/javascript"> let qq= document.querySel
JavaScript之DOM-8 Event对象(事件概述、事件处理、event对象)
weixin_34080571的博客
04-01 143
一、事件概述事件概述 - 当用户与 Web 页面进行某些交互时，解释器就会创建相应的event对象以描述事件信息。常见的事件有: - 用户点击页面上的某项内容- 鼠标经过特定的元素 - 用户按下键盘上的某个按键 - 用户滚动窗口或改变窗口大小 - 页面元素加载完成或加载失败 - ... - 1995年 IE4 ...
DOM-8 【读写样式属性-操作伪元素-元素运动初探】
小管打天下的博客
05-24 668
一、读写样式属性 （1）DOM间接操作CSS 要点 elem.style.xxx 是可读可写的 小驼峰写 值是字符串 复合值一定拆解赋值 保留字前面加css（比如cssFloat） （2）查看CSS属性的方法 方法一：元素.style 返回元素可设置样式的集合 所有可以设置的样式都在CSSStyleDecalaration(CSS样式声明)里面 方法二：window.getComputedStyle(div, null) 获取当前元素所有样式的显示值与默认值（设置了就是显示值，没设置的就是默认值），而
事件中会产生哪些兼容问题
GuoRongABC的博客
08-11 1357
1.事件对象的创建 2.事件冒泡 3.浏览器的默认行为 4.事件委托中事件源的获取
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
09-03
DOM事件标准定义了两种事件流，这两种事件流有着显著的不同并且可能对你的...和许多Web技术一样，在它们成为标准之前，Netscape和微软各自不同地实现了它们，下面介绍DOM事件阶段以及事件捕获与事件冒泡先后执行顺序
js事件机制—-捕获与冒泡机制实例分析
11-20
本文实例讲述了js事件机制—-捕获与冒泡机制。分享给大家供大家参考，具体如下： 先从事件绑定机制说起, 事件绑定机制通过绑定方法addEventListener()实现, 语法格式如下: element.addEventListener(event, function...
javascript 中事件冒泡和事件捕获机制的详解
01-19
javascript 中事件冒泡和事件捕获机制的详解 二者作用：描述事件触发时序问题 事件捕获：从document到触发事件的那个节点，即自上而下的去触发事件—由外到内 事件冒泡：自下而上的去触发事件—由内到外 绑定事件...
24 React.createRef()用法细节分析
Stephy_Yy
10-12 1944
通过React.createRef → ref对象 通过元素的ref属性可以附加到React元素上 一般通过构造器中给this的属性赋值一个ref，方便整个组件使用 ref只要传递到react元素中，就可以利用ref的current属性访问到该真实DOM节点 ref在componentDidMount和componentDidUpdate触发前更新 current里是null的现象 由于打印时，this.modalRef才刚刚声明，current是null，但是current是个引用值，展开时访问的是.
13 代码分割之import静动态导入
Stephy_Yy
05-09 1343
前端首屏优化方案之一 项目构建时会整体打包成一个bundle的JS文件，而有的代码、模块是加载时不需要的，需要分割出来单独形成一个文件块chunk（不会打包在main里），让模块懒加载（想加载时才加载），以减少应用体积、减少加载时的体积。 import是关键字而非函数（类比typeof，typeof '123’ or typeof('123')） 静态导入： import xxx from ''，导入并加载时，导入的模块会被编译，不是按需编译 动态导入：import('') 根据条件或按需的模块导入
ES6-2 块级作用域与嵌套、let、暂行性死区
Stephy_Yy
07-10 1323
阮一峰ES6 - let 思考，在编写代码时，有es5、es6的语法，究竟是否有块级作用域？ ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。 1. var关键字可以重复声明 var num1 = 1; var num1 = 100; console.log(num1) // 100 2. let块级作用域 2.1 同一作用域下不能重复声明（无论是let/var/const声明） let num1 = 1; var num1 = 100
正则 - 阮一峰
Stephy_Yy
07-19 682
学习地址 一 正则实例方法 1. test 正则实例.test返回布尔值 var r = /x/g; var s = '_x_x'; r.lastIndex // 0 r.test(s) // true r.lastIndex // 2 r.test(s) // true r.lastIndex // 4 r.test(s) // false 死循环，因为while循环的每次匹配条件都是一个新的正则表达式，导致lastIndex属性总是等于0。 var count = 0; while (/
typescript
Stephy_Yy
11-05 478
mock数据api ts-node tsc指令（typescript compile）编译并执行ts文件 npm install -g typescript ts-node tsc --help // 查看指令 cnpm install axios -S tsc index.ts ts-node index.ts
15 错误边界与使用技巧
Stephy_Yy
10-06 470
错误边界 React16增加 防止某个组件的UI渲染错误导致整个应用崩溃 子组件发生JS错误，有备用的渲染UI 错误边界是组件，只能用class组件来写 错误边界组件捕获错误的时机 渲染时 生命周期函数中 组件树的构造函数中 getDerivedStateFromError 生命周期函数 static getDerivedStateFromError(error) 参数：子组件抛出的错误 返回值：新的state 渲染阶段调用 作用：不允许出现副作用（异步代码、操作dom等） componentD
【工程师综合项目二】React + Koa2打造『JS++官网管理后台』
Stephy_Yy
10-27 374
Redis认知、安装与操作 MongoDB：动态数据库，如游戏中需要频繁地保存人物的坐标 Oracle：收费，企业级 mac要安装homebrew（包管理工具） window安装Redis程序运行教程 命令行Redis操作 启动： redis-server 启动Redis服务器 连接客户端： redis-cli 操作Redis port: 6379 设置或修改Reids： set name ‘js++’ 获取Redis： get nam
ES5-15 数组基础、数组方法、数组排序
Stephy_Yy
05-21 323
创建数组 字面量 var arr = [] 构造函数 var arr = new Array() 不使用new var arr = Array() 所有数组都继承于Array.prototype，能使用其中的数组方法 数组是另一种形式的对象，访问机制相同 稀松数组 最后一个，后若是空值，则不计入（最后一个逗号忽略） 并非每位都有值 使用构造函数，不能有空值，否则报语法错误 new Array()的参数用于设置数组长度，或设置数组 数组是对象的另一种形式 数组方法 数组方法 - 继承了数组原型
ES6-8 - 函数名/对象拓展、描述符、getter/setter
Stephy_Yy
07-14 308
函数名 有两种特殊情况：bind方法创造的函数，name属性返回bound加上原函数的名字；Function构造函数创造的函数，name属性返回anonymous。 bind函数名 // 以bound开头 function foo() { } const fnName = foo.bind().name console.log(fnName) // bound foo getter setter 如果对象的方法使用了取值函数（getter）和存值函数（setter），则name属性不是在该方
ES5-5 参数默认值、递归、预编译、暗示全局变量
Stephy_Yy
05-11 278
1. 参数默认值 默认是undefined 形参可以有默认值，形参、实参哪个有值取哪个 function test(a = 1, b) { console.log(a, b) } test(undefined, 1) // 1 1 function test(a = undefined, b) { console.log(a, b) } test(1, 1) // 用es5的写法设置默认值 function test(a, b) { a = arguments[0] ||
ES6-4/5 解构赋值、函数默认值、数组解构、对象解构
Stephy_Yy
07-11 265
一 解构赋值 1 虚值 含义：在Boolean转换结果为假的值falsy 2 函数默认值 es6除了undefined给默认值，其余取传入的值 // es5写法 function foo(x, y) { // x = x || 1; // y = y || 2; // 以上写法，遇0出bug // 计算类型的，要取得正确结果，要考虑0的情况，应如下 if (x !== 0) { x = x || 1; } if (y !==
DOM事件捕获、冒泡和事件委托，不冒泡的事件有哪些
最新发布
03-31
1. DOM事件捕获：事件从最外层的祖先元素开始向下传递，直到目标元素。 2. DOM事件冒泡：事件从目标元素开始向上传递，直到最外层的祖先元素。 3. 事件委托：将事件绑定在父元素上，利用事件冒泡的机制，在父元素上统一处理子元素的事件。 4. 不冒泡的事件有：focus、blur、load、unload、resize、submit、reset、change。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值