JavaScript（事件流、事件委托、实例化、dom节点）
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
- 前言
-
- 3.1 事件流
-
- 3.1.1 捕获和冒泡
- 3.1.2 阻止冒泡
- 3.2 事件委托
- 3.3 其他事件
-
- 3.3.1 页面加载事件
- 3.3.2 元素滚动事件
- 3.3.3 页面尺寸事件
- 3.4 元素尺寸与位置
- 4.1 日期对象
-
- 4.1.1 实例化
- 4.1.2 方法
- 4.1.3 时间戳
- 4.2 DOM 节点
-
- 4.2.1 插入节点
- 4.2.2 删除节点
- 4.2.3 查找节点
-
- 1. 父子关系
- 2. 兄弟关系
- 总结
前言
一名刚刚入坑前端的小白，如有错误还望指出，谢谢您的查阅
提示：以下是本篇文章正文内容，下面案例可供参考
3.1 事件流
事件流是对事件执行过程的描述，了解事件的执行过程有助于加深对事件的理解，提升开发实践中对事件运用的灵活度。
如上图所示，任意事件被触发时总会经历两个阶段：【捕获阶段】和【冒泡阶段】。
简言之，捕获阶段是【从父到子】的传导过程，冒泡阶段是【从子向父】的传导过程。
3.1.1 捕获和冒泡
了解了什么是事件流之后，我们来看事件流是如何影响事件执行的：
<body>
<h3>事件流h3>
<p>事件流是事件在执行时的底层机制，主要体现在父子盒子之间事件的执行上。p>
<div class="outer">
<div class="inner">
<div class="child">div>
div>
div>
<script>
// 获取嵌套的3个节点
const outer = document.querySelector('.outer');
const inner = document.querySelector('.inner');
const child = document.querySelector('.child');
// html 元素添加事件
document.documentElement.addEventListener('click', function () {
console.log('html...')
})
// body 元素添加事件
document.body.addEventListener('click', function () {
console.log('body...')
})
// 外层的盒子添加事件
outer.addEventListener('click', function () {
console.log('outer...')
})
// 中间的盒子添加事件
outer.addEventListener('click', function () {
console.log('inner...')
})
// 内层的盒子添加事件
outer.addEventListener('click', function () {
console.log('child...')
})
script>
body>
执行上述代码后发现，当单击事件触发时，其祖先元素的单击事件也【相继触发】，这是为什么呢？
结合事件流的特征，我们知道当某个元素的事件被触发时，事件总是会先经过其祖先才能到达当前元素，然后再由当前元素向祖先传递，事件在流动的过程中遇到相同的事件便会被触发。
再来关注一个细节就是事件相继触发的【执行顺序】，事件的执行顺序是可控制的，即可以在捕获阶段被执行，也可以在冒泡阶段被执行。
如果事件是在冒泡阶段执行的，我们称为冒泡模式，它会先执行子盒子事件再去执行父盒子事件，默认是冒泡模式。
如果事件是在捕获阶段执行的，我们称为捕获模式，它会先执行父盒子事件再去执行子盒子事件。
<body>
<h3>事件流h3>
<p>事件流是事件在执行时的底层机制，主要体现在父子盒子之间事件的执行上。p>
<div class="outer">
<div class="inner">div>
div>
<script>
// 获取嵌套的3个节点
const outer = document.querySelector('.outer')
const inner = document.querySelector('.inner')
// 外层的盒子
outer.addEventListener('click', function () {
console.log('outer...')
}, true) // true 表示在捕获阶段执行事件
// 中间的盒子
outer.addEventListener('click', function () {
console.log('inner...')
}, true)
script>
body>
结论：
addEventListener第3个参数决定了事件是在捕获阶段触发还是在冒泡阶段触发addEventListener第3个参数为true表示捕获阶段触发，false表示冒泡阶段触发，默认值为false- 事件流只会在父子元素具有相同事件类型时才会产生影响
- 绝大部分场景都采用默认的冒泡模式（其中一个原因是早期 IE 不支持捕获）
3.1.2 阻止冒泡
阻止冒泡是指阻断事件的流动，保证事件只在当前元素被执行，而不再去影响到其对应的祖先元素。
<body>
<h3>阻止冒泡h3>
<p>阻止冒泡是指阻断事件的流动，保证事件只在当前元素被执行，而不再去影响到其对应的祖先元素。p>
<div class="outer">
<div class="inner">
<div class="child">div>
div>
div>
<script>
// 获取嵌套的3个节点
const outer = document.querySelector('.outer')
const inner = document.querySelector('.inner')
const child = document.querySelector('.child')
// 外层的盒子
outer.addEventListener('click', function () {
console.log('outer...')
})
// 中间的盒子
inner.addEventListener('click', function (ev) {
console.log('inner...')
// 阻止事件冒泡
ev.stopPropagation()
})
// 内层的盒子
child.addEventListener('click', function (ev) {
console.log('child...')
// 借助事件对象，阻止事件向上冒泡
ev.stopPropagation()
})
script>
body>
结论：事件对象中的 ev.stopPropagation 方法，专门用来阻止事件冒泡。
鼠标经过事件：
mouseover 和 mouseout 会有冒泡效果
mouseenter 和 mouseleave 没有冒泡效果 (推荐)
3.2 事件委托
事件委托是利用事件流的特征解决一些现实开发需求的知识技巧，主要的作用是提升程序效率。
大量的事件监听是比较耗费性能的，如下代码所示
<script>
// 假设页面中有 10000 个 button 元素
const buttons = document.querySelectorAll('table button');
for(let i = 0; i <= buttons.length; i++) {
// 为 10000 个 button 元素添加了事件
buttons.addEventListener('click', function () {
// 省略具体执行逻辑...
})
}
script>
利用事件流的特征，可以对上述的代码进行优化，事件的的冒泡模式总是会将事件流向其父元素的，如果父元素监听了相同的事件类型，那么父元素的事件就会被触发并执行，正是利用这一特征对上述代码进行优化，如下代码所示：
<script>
// 假设页面中有 10000 个 button 元素
let buttons = document.querySelectorAll('table button');
// 假设上述的 10000 个 buttom 元素共同的祖先元素是 table
let parents = document.querySelector('table');
parents.addEventListener('click', function () {
console.log('点击任意子元素都会触发事件...');
})
script>
我们的最终目的是保证只有点击 button 子元素才去执行事件的回调函数，如何判断用户点击是哪一个子元素呢？
事件对象中的属性 target 或 srcElement属性表示真正触发事件的元素，它是一个元素类型的节点。
<script>
// 假设页面中有 10000 个 button 元素
const buttons = document.querySelectorAll('table button')
// 假设上述的 10000 个 buttom 元素共同的祖先元素是 table
const parents = document.querySelector('table')
parents.addEventListener('click', function (ev) {
// console.log(ev.target);
// 只有 button 元素才会真正去执行逻辑
if(ev.target.tagName === 'BUTTON') {
// 执行的逻辑
}
})
script>
优化过的代码只对祖先元素添加事件监听，相比对 10000 个元素添加事件监听执行效率要高许多！！！
3.3 其他事件
3.3.1 页面加载事件
加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件
有些时候需要等页面资源全部处理完了做一些事情
事件名：load
监听页面所有资源加载完毕：
window.addEventListener('load', function() {
// xxxxx
})
3.3.2 元素滚动事件
滚动条在滚动的时候持续触发的事件
window.addEventListener('scroll', function() {
// xxxxx
})
3.3.3 页面尺寸事件
会在窗口尺寸改变的时候触发事件：
window.addEventListener('resize', function() {
// xxxxx
})
3.4 元素尺寸与位置
获取元素的自身宽高、包含元素自身设置的宽高、padding、border
offsetWidth和offsetHeight
获取出来的是数值,方便计算
注意: 获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0
4.1 日期对象
掌握 Date 日期对象的使用，动态获取当前计算机的时间。
ECMAScript 中内置了获取系统时间的对象 Date，使用 Date 时与之前学习的内置对象 console 和 Math 不同，它需要借助 new 关键字才能使用。
4.1.1 实例化
// 1. 实例化
// const date = new Date(); // 系统默认时间
const date = new Date('2020-05-01') // 指定时间
// date 变量即所谓的时间对象
console.log(typeof date)
4.1.2 方法
// 1. 实例化
const date = new Date();
// 2. 调用时间对象方法
// 通过方法分别获取年、月、日，时、分、秒
const year = date.getFullYear(); // 四位年份
const month = date.getMonth(); // 0 ~ 11
getFullYear 获取四位年份
getMonth 获取月份，取值为 0 ~ 11
getDate 获取月份中的每一天，不同月份取值也不相同
getDay 获取星期，取值为 0 ~ 6
getHours 获取小时，取值为 0 ~ 23
getMinutes 获取分钟，取值为 0 ~ 59
getSeconds 获取秒，取值为 0 ~ 59
4.1.3 时间戳
时间戳是指1970年01月01日00时00分00秒起至现在的总秒数或毫秒数，它是一种特殊的计量时间的方式。
注：ECMAScript 中时间戳是以毫秒计的。
// 1. 实例化
const date = new Date()
// 2. 获取时间戳
console.log(date.getTime())
// 还有一种获取时间戳的方法
console.log(+new Date())
// 还有一种获取时间戳的方法
console.log(Date.now())
获取时间戳的方法，分别为 getTime 和 Date.now 和 +new Date()
4.2 DOM 节点
掌握元素节点创建、复制、插入、删除等操作的方法，能够依据元素节点的结构关系查找节点
回顾之前 DOM 的操作都是针对元素节点的属性或文本的，除此之外也有专门针对元素节点本身的操作，如插入、复制、删除、替换等。
4.2.1 插入节点
在已有的 DOM 节点中插入新的 DOM 节点时，需要关注两个关键因素：首先要得到新的 DOM 节点，其次在哪个位置插入这个节点。
如下代码演示：
<body>
<h3>插入节点h3>
<p>在现有 dom 结构基础上插入新的元素节点p>
<hr>
<div class="box">div>
<button class="btn">插入节点button>
<script>
// 点击按钮，在网页中插入节点
const btn = document.querySelector('.btn')
btn.addEventListener('click', function () {
// 1. 获得一个 DOM 元素节点
const p = document.createElement('p')
p.innerText = '创建的新的p标签'
p.className = 'info'
// 复制原有的 DOM 节点
const p2 = document.querySelector('p').cloneNode(true)
p2.style.color = 'red'
// 2. 插入盒子 box 盒子
document.querySelector('.box').appendChild(p)
document.querySelector('.box').appendChild(p2)
})
script>
body>
结论：
createElement动态创建任意 DOM 节点cloneNode复制现有的 DOM 节点，传入参数 true 会复制所有子节点appendChild在末尾（结束标签前）插入节点
再来看另一种情形的代码演示：
<body>
<h3>插入节点h3>
<p>在现有 dom 结构基础上插入新的元素节点p>
<hr>
<button class="btn1">在任意节点前插入button>
<ul>
<li>HTMLli>
<li>CSSli>
<li>JavaScriptli>
ul>
<script>
// 点击按钮，在已有 DOM 中插入新节点
const btn1 = document.querySelector('.btn1')
btn1.addEventListener('click', function () {
// 第 2 个 li 元素
const relative = document.querySelector('li:nth-child(2)')
// 1. 动态创建新的节点
const li1 = document.createElement('li')
li1.style.color = 'red'
li1.innerText = 'Web APIs'
// 复制现有的节点
const li2 = document.querySelector('li:first-child').cloneNode(true)
li2.style.color = 'blue'
// 2. 在 relative 节点前插入
document.querySelector('ul').insertBefore(li1, relative)
document.querySelector('ul').insertBefore(li2, relative)
})
script>
body>
结论：
createElement动态创建任意 DOM 节点cloneNode复制现有的 DOM 节点，传入参数 true 会复制所有子节点insertBefore在父节点中任意子节点之前插入新节点
4.2.2 删除节点
删除现有的 DOM 节点，也需要关注两个因素：首先由父节点删除子节点，其次是要删除哪个子节点。
<body>
<button>删除节点button>
<ul>
<li>HTMLli>
<li>CSSli>
<li>Web APIsli>
ul>
<script>
const btn = document.querySelector('button')
btn.addEventListener('click', function () {
// 获取 ul 父节点
let ul = document.querySelector('ul')
// 待删除的子节点
let lis = document.querySelectorAll('li')
// 删除节点
ul.removeChild(lis[0])
})
script>
body>
结论：removeChild 删除节点时一定是由父子关系。
4.2.3 查找节点
DOM 树中的任意节点都不是孤立存在的，它们要么是父子关系，要么是兄弟关系，不仅如此，我们可以依据节点之间的关系查找节点。
1. 父子关系
<body>
<button class="btn1">所有的子节点button>
<ul>
<li>HTMLli>
<li>CSSli>
<li>JavaScript 基础li>
<li>Web APIsli>
ul>
<script>
const btn1 = document.querySelector('.btn1')
btn1.addEventListener('click', function () {
// 父节点
const ul = document.querySelector('ul')
// 所有的子节点
console.log(ul.childNodes)
// 只包含元素子节点
console.log(ul.children)
})
script>
body>
结论：
childNodes获取全部的子节点，回车换行会被认为是空白文本节点children只获取元素类型节点
<body>
<table>
<tr>
<td width="60">序号td>
<td>课程名td>
<td>难度td>
<td width="80">操作td>
tr>
<tr>
<td>1td>
<td><span>HTMLspan>td>
<td>初级td>
<td><button>变色button>td>
tr>
<tr>
<td>2td>
<td><span>CSSspan>td>
<td>初级td>
<td><button>变色button>td>
tr>
<tr>
<td>3td>
<td><span>Web APIsspan>td>
<td>中级td>
<td><button>变色button>td>
tr>
table>
<script>
// 获取所有 button 节点，并添加事件监听
const buttons = document.querySelectorAll('table button')
for(let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', function () {
// console.log(this.parentNode); // 父节点 td
// console.log(this.parentNode.parentNode); // 爷爷节点 tr
this.parentNode.parentNode.style.color = 'red'
})
}
script>
body>
结论：parentNode 获取父节点，以相对位置查找节点，实际应用中非常灵活。
2. 兄弟关系
<body>
<ul>
<li>HTMLli>
<li>CSSli>
<li>JavaScript 基础li>
<li>Web APIsli>
ul>
<script>
// 获取所有 li 节点
const lis = document.querySelectorAll('ul li')
// 对所有的 li 节点添加事件监听
for(let i = 0; i < lis.length; i++) {
lis[i].addEventListener('click', function () {
// 前一个节点
console.log(this.previousSibling)
// 下一下节点
console.log(this.nextSibling)
})
}
script>
body>
结论：
previousSibling获取前一个节点，以相对位置查找节点，实际应用中非常灵活。nextSibling获取后一个节点，以相对位置查找节点，实际应用中非常灵活。
总结
- 事件委托的好处是什么？
减少注册次数，提高了程序性能 - 事件委托是委托给了谁？父元素还是子元素？
父元素 - 如何找到真正触发的元素？
事件对象.target.tagName - 页面加载事件有哪两个？如何添加？
load 事件
监听整个页面资源给 window 加
DOMContentLoaded
给 document 加
无需等待样式表、图像等完全加载 - 被卷去的头部或者左侧用那个属性？是否可以读取和修改？
scrollTop / scrollLeft
可以读取，也可以修改（赋值） - 检测页面滚动的头部距离（被卷去的头部）用那个属性？
document.documentElement.scrollTop - offsetWidth和offsetHeight是得到元素什么的宽高？
内容 + padding + border - offsetTop和offsetLeft 得到位置以谁为准？
带有定位的父级
如果都没有则以 文档左上角 为准 - 实例化日期对象怎么写？
new Date() - 日期对象方法里面月份和星期有什么注意的？
月份是0~11, 星期是 0~6 - 获取时间戳有哪三种方式？重点记住那个？
date.getTime()
+new Date()
Date.now()
重点记住 +new Date() 因为可以返回当前时间戳或者指定的时
间戳 - 什么是DOM 节点？
DOM树里每一个内容都称之为节点 - DOM节点的分类？
元素节点 比如 div标签
属性节点 比如 class属性
文本节点 比如标签里面的文字 - 我们重点记住那个节点？
元素节点
可以更好的让我们理清标签元素之间的关系 - 查找父节点用那个属性？
parentNode - 查找所有子节点用那个属性？
children - 查找兄弟节点用那个属性？
nextElementSibling
previousElementSibling