DOM事件流三个阶段
DOM事件流三个阶段
<!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>DOM事件流三个阶段</title><style>.father {overflow: hidden;width: 300px;height: 300px;margin: 100px auto;background-color: pink;text-align: center;}.son {width: 200px;height: 200px;margin: 50px;background-color: purple;line-height: 200px;color: #fff;}</style>
</head><body><div class="father"><div class="son">son盒子</div></div><script>// dom 事件流 三个阶段// 1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。// 2. onclick 和 attachEvent(ie) 只能得到冒泡阶段。// 3. 捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段 document -> html -> body -> father -> son// var son = document.querySelector('.son');// son.addEventListener('click', function() {// alert('son');// }, true);// var father = document.querySelector('.father');// father.addEventListener('click', function() {// alert('father');// }, true);// 4. 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段 son -> father ->body -> html -> documentvar son = document.querySelector('.son');son.addEventListener('click', function () {alert('son');}, false);var father = document.querySelector('.father');father.addEventListener('click', function () {alert('father');}, false);document.addEventListener('click', function () {alert('document');})</script>
</body></html>
DOM事件流三个阶段相关推荐
- 理解DOM事件流的三个阶段 - Lxxyx的开发笔记 - SegmentFault 思否
本文主要解决两个问题: 什么是事件流 DOM事件流的三个阶段 起因 在学习前端的大半年来,对DOM事件了解甚少.一般也只是用用onclick来绑定个点击事件.在寒假深入学习JavaScript时,愈发 ...
- 漫谈DOM 事件流的三个阶段
一丶 流 什么是流? 比如 react 中的单项数据流,Node.js 中的流,或者本文中的 DOM 事件流,都是流的具体体现.专业地讲,流是程序输入或输出的一个连续的字节序列:通俗地讲,流是有方向的 ...
- addeventlistener事件第三个参数 passive_JS DOM 事件流、事件冒泡
当一个HTML元素触发一个事件时,该事件会在元素结点与根结点之间的路径传播.传播按顺序分为三个阶段:捕获阶段.目标阶段.冒泡阶段,这个传播过程就是 DOM 事件流. 事件冒泡就是当一个HTML元素出发 ...
- “约见”面试官系列之常见面试题之第六十一篇之IE和DOM事件流(建议收藏)
什么是"事件流"? 事件流描述的是从页面中接收事件的顺序 事件流的种类: 事件流主要分为三种 事件冒泡流(IE事件流):事件开始时由最具体的元素(文档中嵌套最深的那个节点)接收,然 ...
- JavaScript-浅谈DOM事件流
什么是事件?(敲黑板) 事件,就是文档或浏览器窗口发生的一些特定的交互瞬间.(by <JavaScript高级程序设计>) 比如鼠标点击,双击,滚动条滑动... 什么是事件流? 先来看一个 ...
- DOM事件流(支持冒泡与不支持冒泡事件)
DOM事件流(event flow )分为以下三个阶段: 事件捕获阶段 事件捕获(event capturing):意思是当鼠标点击或者触发dom事件的时候,浏览器会从这个事件的元素根节点开始一层一层 ...
- 13前端学习之WebAPI(三):节点操作、事件高级、DOM事件流、事件委托冒泡
文章目录 一.节点操作: 1. 删除节点: 1.2. 案例:删除留言 2. 赋值(克隆)节点: 3. 案例:动态生成表格: 3.1 案例分析: 3.2 实现: 4. 创建元素的三种方式: 4.1 区别 ...
- 带你理解DOM事件流
在做前端开发的时候,我们经常需要做一些各式各样的交互,如鼠标单击/双击/滑动事件.键盘事件等等等等,这些都是DOM事件.首先我们先看一个概念,叫DOM事件流. DOM事件流 事件流:事件在目标元素和祖 ...
- IE和DOM事件流、普通事件和绑定事件的区别
IE和DOM事件流的区别 IE采用冒泡型事件 Netscape(网络信息浏览器)使用捕获型事件 DOM使用先捕获后冒泡型事件 示例: <body> <div> <butt ...
最新文章
- Sass--@-Rules
- Battle Encoder Shirase一款能限制进程CPU占有率的小东西
- 6 Linux之bash环境配置
- Saiku2.6 配置数据源
- 50 Most Frequently Used UNIX / Linux Commands (With Examples)
- android 5.0 lg g2,升级到Android 5.0 的LG G2怎样Root?
- 远程桌面远程控制工具分享
- 2023年中南大学资源与环境考研考情与难度、参考书及上岸前辈备考经验
- oceanbase基于mysql吗_OCEANBASE整体架构
- 快速入门了解后端网络方面必备知识
- 生也有涯而知也无涯,以有涯应无涯,殆矣
- 文件下载兼容ie,Firefox,chrome
- Git 克隆大型仓库失败解决方法
- 循环事件绑定和原型的应用
- [转]免费接口API
- ZZULIOJ-1067,有问题的里程表(Python)
- 用计算机时按错了按什么键恢复出厂设置,电脑开机按什么键进入一键还原 选择高级—将系统恢复到过去某...
- php 获取微信文章阅读量,获取微信公众号的文章的阅读数的实践(请求参数不支持文章 ID)...
- ITE联阳半导体 HDMI2.0b/MHL2.2转LVDS芯片 支持3D
- 现代时尚人像调色效果Lr预设