失物不招领的前端学习日记（12）

DOM事件进阶

一、事件流：

1.1 事件流与两个阶段说明：

1、概念：事件流指的是事件完整执行过程中的流动路径。

2、说明：假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段。
3、简单来说：捕获阶段是从父到子，冒泡阶段是从子到父。实际工作都是使用事件冒泡为主。

1.2 事件捕获：

1、概念：

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

2、代码语法：

DOM.addEventListner(事件类型，事件处理函数，是否使用捕获机制)

3、说明：

1）addEventListener第三个参数传入true代表是捕获阶段触发（很少使用）。
2）若传入false代表冒泡阶段触发，默认就是false。
3）若是L0事件监听，则只有冒泡阶段，没有捕获。

1.3 事件冒泡：

1、概念：

当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发，这一过程称为事件冒泡。

2、理解：

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

3、注意：

1）事件冒泡默认存在。
2）L2事件监听第三个参数是false，或者默认都是冒泡。
3）有些事件没有冒泡，比如onblur、onfocus、onmouseenter、onmouseleave。

1.4 阻止冒泡：

1、问题：

因为默认就有冒泡模式的存在，容易导致事件影响到父级元素。

2、需求：

想把事件就限制在当前元素内，就要阻止事件冒泡。

3、前提：

阻止事件冒泡需要拿到事件对象。

4、语法：

事件对象.stopPropagation()

5、注意：

此方法可以阻止事件流动传播，不光在冒泡阶段有效，捕获阶段也有效。
eg.

1.5 解绑事件：

on事件方式，直接使用null覆盖就可以实现事件的解绑。

1、语法：

btn.onclick = function() {
   alert('点击了')
}
btn.onclick = null

eg.

2、addEvenListener方式：

该方式必须使用removeEventListener(事件类型，事件处理函数，[ 获取捕获或者冒泡阶段 ])。

注意：
匿名函数无法被解绑

eg.

3、鼠标经过事件的区别：

鼠标经过事件：

二、事件委托：

2.1 事件委托：

事件委托是利用事件流的特征解决一些开发需求的知识技巧。

eg.

触发的目标元素：
e.target.tagName = ‘LI’

2.2 阻止冒泡：

e.preventDefault()

我们某些情况下需要阻止默认行为的发生，比如阻止链接的跳转，表单域跳转。
eg.

三、其他事件：

3.1 页面加载事件：

（1）load加载：

1、概念：加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件。
2、事件名：load
3、监听页面所有资源加载完毕：

给window添加load事件

4、语法：

5、注意：
不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件。
eg.

（2）DOMContentLoaded加载：

语法：

3.2 元素滚动事件：

1、概念：

滚动条在滚动的时候持续触发的事件。

2、事件名：

事件名为scroll

3、监听整个页面滚动语法：

（习惯给window或document添加scroll事件）

4、scrollLeft和scrollTop（属性）：

注意：
尽量在scroll事件里面获取被卷去的距离。

语法：

eg.

获取html元素写法：

document.doucumentElement.scrollTop

3.3 页面尺寸事件：

1、会在窗口尺寸改变的时候触发事件：resize:

window.addEventListner('resize',function() {
 })

2、检测屏幕宽度：

window.addEventListener('resize',function() {
    let w=document.documentElement.clientWidth
    console.log(w)
})

3、获取宽高：

1、获取元素的可见部分宽高（不包含边框，margin，滚动条等）
2、clientWidth和clientHeight

四、元素尺寸与位置：

1、使用场景：

2、获取宽高：

3、获取位置：

五、 日期对象

1、概念：用来表示时间的对象。
2、作用：可以得到当前系统时间

5.1 实例化：

1、概念：

在代码中发现了new关键字时，一般将这个操作称为实例化。

2、创建一个时间对象并获取时间：

（1）获得当前时间：

const date=new Date()

（2）获得指定时间：

const date=new Date('2008-8-8')
console.log(date)

5.2 时间对象方法：

1、使用场景：
因为日期对象返回的数据我们不能直接使用，所以需要转换为实际开发中常用的格式。

eg.

eg.

5.3时间戳：

1、使用场景：

如果计算倒计时效果，前面方法无法直接计算，需要借助于时间戳完成。

2、概念：

是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式。

3、算法：

4、获取时间戳：

（1）使用getTime() 方法：

const date = new Date()
console.log(date.getTime())

（2）简写 +new Date() ：

console.log(+new Date())

注意：无需实例化

（3）使用Date.now() ：

console。log(Date.now())

注意：

a.无需实例化
b.但只能得到当前的时间戳，而前面两种可以返回指定时间的时间戳。

六、节点操作：

6.1 DOM节点：

DOM树里每一个内容都称为节点。

1、节点类型：

6.2 查找节点：

1、节点关系：

针对的找亲戚返回的都是对象。
（1）父节点（2）子节点（3）兄弟节点

2、父节点查找：

子元素.parentNode

（1）parentNode属性
（2）返回最近一级的父节点，找不到返回为null

3、子节点查找：

（1）childNodes：

获得所有子节点、包括文本节点（空格、换行）、注释节点等。

（2）children属性（重点）：

父元素.children

a.仅获得所有元素节点
b.返回的还是一个伪数组

4、兄弟关系查找：

（1）下一个兄弟节点：

nextElementSibling 属性

（2）上一个兄弟节点：

previousElementSibling 属性

6.3 增加节点：

1、创建节点：

document。createElement('标签名')

即创造出一个新的网页元素，再添加到网页内，一般先创建节点，再插入节点。

2、追加节点：

（1）插入到父元素最后一个子元素：

父元素.appendChild(要插入的元素)

eg.

（2）插入到父元素中某个子元素前面：

父元素.insertBefore(要插入的元素，在哪个元素前面)

eg.

3、克隆节点：

元素.cloneNode(布尔值)

eg.

6.4 删除节点：

1、使用场景：

当一个节点在页面中已不需要时，可以删除它。

2、语法：

父元素.removeChild(要删除的元素)

3、前提：

在JS原生DOM操作中，要删除元素必须通过父元素删除。

4、注意：

七、M端事件：

常见的触屏事件：

八、JS插件：

1、插件概念：

别人写好的一些代码，我们只需要复制对应的代码，就可以直接实现对应的效果。

2、学习插件的基本过程：