事件流

事件捕获

事件冒泡

阻止冒泡

解绑事件

事件委托

其他事件

1、页面加载事件

2、页面滚动事件

3、页面尺寸事件

元素尺寸与位置

今日单词

综合案例

事件流

事件完整执行过程中的流动路径。

事件捕获

概念：

从DOM的根元素开始去执行对应的事件（从外到里）；

需要对应代码才能看到效果；

代码：DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制）

事件冒泡

概念：

当一个元素触发事件后，会一次向上调用所有父级元素的同名事件；

默认存在；

阻止冒泡

阻止冒泡是指阻断事件的流动，保证事件只在当前元素被执行，而不再去影响到其对应的祖先元素。

语法：事件对象.stopPropagation()

鼠标经过事件：

mouseover 和 mouseout 会有冒泡效果；

mouseenter 和 mouseleave 没有冒泡效果 (推荐)。

解绑事件

语法：对象.removeEventListener()

事件委托

语法：事件对象.target.tagName

优点：减少注册次数，提高程序性能。

原理：利用事件冒泡的特点；触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件。

// 需求：用事件委托达到点击li时字体变成红色// 1.获取元素const ul = document.querySelector('ul')// 2.注册事件ul.addEventListener('click', function (e) {// console.log(e.target) //点击的对象// 条件： 标签为li的才会执行， li 的语法要大写if (e.target.tagName === 'LI') {e.target.style.color = 'red'}})

其他事件

1、页面加载事件

加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件

有些时候需要等页面资源全部处理完了做一些事情

1.1、等待页面所有资源加载完毕再回去执行回调函数：

事件名：load。

语法： window.addEventListener（‘load’ ，function（）{ }）

  <script>window.addEventListener('load', function () {const btn = document.querySelector('button')btn.addEventListener('click', function () {alert('我被点击了~')})})</script>
</head><body><button>点击</button>
</body>

1.2、等待document加载完毕就可执行回调函数，无需等待所有资源加载。

语法：document.addEventListener('DOMContentLoaded',function(){ })

document.addEventListener('DOMContentLoaded', function () {const btn = document.querySelector('button')btn.addEventListener('click', function () {alert('我被点击了~')})})

2、页面滚动事件

 // 需求：向下滚动300px后电梯出现，反之隐藏    300不严谨，故改成.xtx_entry距离距离顶部的位置// 获取元素const entry = document.querySelector('.xtx_entry')const elevator = document.querySelector('.xtx-elevator')// 注册事件  页面滚动事件window.addEventListener('scroll', function () {// 获取html滚动的像素，赋值给nconst n = document.documentElement.scrollTop// console.log(n)// if else 换成三元运算符elevator.style.opacity = n >= entry.offsetTop ? 1 : 0// if (n >= 300) {//   elevator.style.opacity = 1// } else {//   elevator.style.opacity = 0// }})

// 点击返回顶部  电梯// 获取元素const backTop = document.querySelector('#backTop')// 注册事件backTop.addEventListener('click', function () {document.documentElement.scrollTop = 0// 另一种方法： window.scrollTo(0, 0)})

3、页面尺寸事件

在窗口尺寸改变的时候触发事件：

window.addEventListener('resize', function() {// xxxxx
})

元素尺寸与位置

获取元素的自身宽高、包含元素自身设置的宽高、padding、border；

offsetWidth和offsetHeight；

获取出来的是数值,方便计算；

注意: 获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0。

今日单词

单词	说明	语法
stopPropagation	阻止冒泡	事件对象.stopPropagation()
removeEventListener	解绑事件	对象.removeEventListener()
target	事件的对象	事件对象.target.tagName
tagName	事件对象中的名字	事件对象.target.tagName
preventDefault	阻止默认行为	事件对象.preventDefault()
DOMContentLoaded	无需等待css或图片完全加载完毕	document.addEventListener('DOMContentLoaded',function(){ })
scroll	滚动事件	属性
scrollTop/scrollLife	被卷去的头/左部，配合页面滚动来用，可读写	window.addEventListener('scroll', function () { }
document.documentElement	获取html元素	document.documentElement
clientWidth/ clientHeight	获取元素的可见部分的宽高（不包含边框，margin，滚动条等）	属性
offsetWidth/offsetHeight / offsetTop / offsetLeft	获取元素的可见部分的宽高，包含border、padding，滚动条等，只读,获取元素位置的时候使用，只读属性	属性

综合案例

电梯导航案例：https://www.aliyundrive.com/s/rmjMZgCQYxo 点击链接保存，或者复制本段内容，打开「阿里云盘」APP ，无需下载极速在线查看，视频原画倍速播放。

Web APIs-事件流、事件委托、其他事件、元素尺寸与位置相关推荐

【事件流】浅谈事件冒泡事件捕获------【巷子】
首先在扯淡的时候我们需要先了解一个东西,这个东西就是事件流.1.什么是事件流?解释:当一个HTML元素触发一个事件处理函数的时候,该事件会在该元素节点到根节点之间传播,传播路径所经过的节点都会接受到该 ...
「事件流处理架构」事件流处理的八个趋势
经过二十多年的研究和开发,事件流处理(ESP)软件平台已不再局限于在小生境应用或实验中使用.它们已经成为许多业务环境中实时分析的基本工具. 其动机来自需要分析的流数据量激增,特别是: 物联网传感器数据 ...
Logstash：使用 aggregation filter 把事件流聚合为一个事件
在我之前的文章 "Logstash:使用 aggregate filter 处理 N:N 关系",我详述了如何使用 aggregation filter 来把关系数据库中的数据进行 ...
Web APIs三、DOM事件进阶
零.文章目录 Web APIs三.DOM事件进阶 1.事件流 (1)事件流和两个阶段说明事件流指的是事件完整执行过程中的流动路径假设页面里有个div,当触发事件时,会经历两个阶段,分别是捕获阶段. ...
事件对象，事件流（事件冒泡和事件捕获）、事件委托、L0和L2注册等相关概念及用法
事件对象 1. 事件对象是什么? 这个对象包含事件触发时的相关信息.如:鼠标点击事件中,事件对象就存了鼠标点击时的位置信息等. 2. 事件对象在哪里? 在事件绑定的回调函数的第一个参数就是事件对象,一 ...
第三天：js中的事件提高篇（事件流，事件对象，事件委托深层次理解）
目录前言一,基础部分 1.1 js监听并绑定事件 1.2 删除事件绑定二,事件流 2.1 事件流是什么 2.2 事件流模型 2.3 捕获与冒泡具体示例 2.3.1 addEventListene ...
JS7day(事件对象，事件流，事件捕获和冒泡，阻止事件流动，事件委托，学生信息表案例)
文章目录事件对象获取事件对象部分常用属性事件流事件捕获概念: 事件冒泡概念: 阻止事件流动: 相同的鼠标经过事件: 两种(监听事件)注册事件的区别: 传统on注册(L0) 事件监听注册(L2 ...
后处理程序文件大小的变量_【每日一题】(17题)面试官问：JS中事件流，事件处理程序，事件对象的理解？...
关注「松宝写代码」,精选好文,每日一题作者:saucxs | songEagle 2020,实「鼠」不易 2021,「牛」转乾坤风劲潮涌当扬帆,任重道远须奋蹄! 一.前言 2020.12.23 立 ...
JavaScript-浅谈DOM事件流
什么是事件?(敲黑板) 事件,就是文档或浏览器窗口发生的一些特定的交互瞬间.(by <JavaScript高级程序设计>) 比如鼠标点击,双击,滚动条滑动... 什么是事件流? 先来看一个 ...

Web APIs-事件流、事件委托、其他事件、元素尺寸与位置

事件流

事件捕获

事件冒泡

阻止冒泡

解绑事件

事件委托

其他事件

1、页面加载事件

2、页面滚动事件

3、页面尺寸事件

元素尺寸与位置

今日单词

综合案例

Web APIs-事件流、事件委托、其他事件、元素尺寸与位置相关推荐

最新文章

热门文章

Web APIs-事件流、事件委托、其他事件、元素尺寸与位置

事件流

事件捕获

事件冒泡

阻止冒泡

解绑事件

事件委托

其他事件

1、页面加载事件

2、 页面滚动事件

3、页面尺寸事件

元素尺寸与位置

今日单词

综合案例

Web APIs-事件流、事件委托、其他事件、元素尺寸与位置相关推荐

最新文章

热门文章

2、页面滚动事件