JS基础问题归纳(二)

一、定时器

1. 如何开启定时器

setInterval(函数，间隔时间)

作用：每隔一段时间调用这个函数

间隔时间单位是毫秒

注意：

1.函数名字不需要加括号

2.定时器返回的是一个id数字

2. 如何关闭定时器

let 变量名 = setInterval(函数，间隔时间)

clearInterval(变量名)

3. 轮播图中的小圆点，如何进行轮换？

利用排他思想。

①先删除当前的active

document.querySelector('.active').classList.remove('active')

②再给当前li添加active

document.querySelector(`li:nth-child(${i + 1})`).classList.add('active')

其中i从0开始数起，而nth-child从1开始，所以需要i + 1

二、事件监听

1. 什么是事件？

事件是在编程时系统内发生的动作或者发生的事前。

比如用户在网页上单击一个按钮。

2. 什么是事件监听?

就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 绑定事件或者注册事件。

比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等

3. 事件监听的语法和三要素？

语法： 元素对象.addEventListener('事件类型'，要执行的函数)

事件监听三要素：

事件源：（谁被触发了）哪个dom元素被事件触发了，要获取dom元素

事件类型：用什么方式触发，比如鼠标单击click，鼠标经过mouseover等

事件处理程序：要做什么事

4. 事件监听版本

1. DOM L0

        事件源.on事件 = function() {}

2. DOM L2

        事件源.addEventListener(事件, 事件处理函数)

3. 区别：

        on方式会被覆盖，addEventListener方式可绑定多次，拥有事件更多特性，推荐使用

5. 事件类型

鼠标事件：鼠标触发

        click 鼠标点击

        mouseenter 鼠标经过

        mouseleave 鼠标离开

焦点事件：表单获得光标

        focus 获得焦点

        blur  失去焦点

键盘事件：键盘触发

        keydown 键盘按下触发

        keyup 键盘抬起触发

文本事件：表单输入触发

        input 用户输入事件

6. 环境对象

环境对象：指的是函数内部特殊的变量 this， 它代表着当前函数运行时所处的环境

作用：弄清楚this的指向，可以让我们代码更简洁

        函数的调用方式不同，this自带的对象也不同

        谁调用，this就是谁，是判断this指向的粗略规则

7. 回调函数

把函数当作另外一个函数的参数传递，这个函数就叫回调函数

回调函数本质还是函数，只不过把它当成参数使用

使用匿名函数作为回调函数比较常见

常见的使用场景：

function fn(){

        console.log('我是回调函数...')

}

// fn传递给了setInterval，fn就是回调函数

setInterval(fn, 1000)

box.addEventListener('click',function () {

        console.log('我也是回调函数')

})

三、事件流

1. 什么是事件流？

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

捕获阶段：Document → Element html →Element body → Element div

冒泡阶段：上述反向

说明：假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段

简单来说：捕获阶段是 从父到子 冒泡阶段是 从子到父

2. 什么是事件捕获？

概念：从DOM的根元素开始去执行对应的事件(从外到里)

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

说明：addEventListener第三个参数传入true代表是捕获阶段触发(很少使用)

若传入false代表冒泡阶段触发，默认就是false

若是L0事件监听，则只有冒泡阶段，没有捕获

爷爷→爸爸→儿子

3. 什么是事件冒泡？

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

儿子→爸爸→爷爷

简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的 同名事件（例如都是click）

事件冒泡是默认存在的

L2事件监听第三个参数是false，或者 默认都是冒泡

4. 什么是阻止冒泡？

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

需求：若想把事件就限制在当前元素内，就需要阻止事件冒泡

前提：阻止事件冒泡需要拿到事件对象

语法：事件对象.stopPropagation()

注意：此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有

5. 什么是事件解绑？

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

语法：

// 绑定事件

btn.onclick = function () {

        alert('点击了')

}

// 解绑事件

btn.onclick = null

6. 鼠标经过事件的区别

mouseover 和 mouseout 会有冒泡效果

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

7. 两种注册事件的区别

传统on注册(L0)

        同一个对象，后面注册的事件会覆盖前面注册(同一个事件)

        直接使用null覆盖偶就可以实现事件的解绑

        都是冒泡阶段执行的

事件监听注册(L2)

        语法：addEventListener(事件类型, 事件处理函数, 是否使用捕获)

        后面注册的事件不会覆盖前面注册的事件(同一个事件)

        可以通过第三个参数去确定是在冒泡或者捕获阶段执行

        必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)

        匿名函数无法被解绑

8. 什么是事件委托？

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

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

②原理：事件委托其实是利用事件冒泡的特点，给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件

③实现：事件对象.target.tagName可以获得真正触发事件的元素