【前端面试】03 DOM事件总结

r囧r小猫 2021-10-25 14:32 307阅读 0赞

**本文笔记基于「千古壹号」的GitHub项目：https://github.com/qianguyihao/web**

### 文章目录 ###

*  1.基础
 *   *  1.1 绑定事件的两种方式/DOM事件的级别
     *  1.2 DOM事件流
     *  1.3 事件冒泡
 *  2.问题
 *  3.解决方法
 *   *  3.1 DOM事件级别
     *  3.2 DOM事件模型、DOM事件流
     *  3.3 描述DOM事件捕获的具体流程
     *  3.4 Event对象常见应用/api方法
     *  3.5 自定义事件
     *  3.6 事件委托

# 1.基础 #

## 1.1 绑定事件的两种方式/DOM事件的级别 ##

以点击事件为例：

*  **DOM0**：

element.onclick = function () { 
        }

*  **DOM2**:原事件被执行的时候，**后面绑定的事件照样被执行，不会出现层叠。**（更适合团队开发）

element.addEventListener('click', function () { 
        }, false);

参数3：true表示**捕获阶段**触发，false表示**冒泡阶段**触发（默认）。如果不写，则默认为false。【重要】

## 1.2 DOM事件流 ##

事件传播3个阶段：

*  **事件捕获阶段**：从最上一级标签开始往下找，addEventListener（\[ɪˈvent\]）可以捕获事件，第三个参数为true
 *  **事件目标**：达到目标元素后，执行目标元素该事件相应的处理函数
 *  **冒泡阶段**：从事件目标target开始，开始冒泡到页面最上一级标签。

在js中：

*  如果想获取 html节点，方法是**document.documentElement。**（ \[ˈdɑːkjumənt ˈelɪmənt\]）

## 1.3 事件冒泡 ##

概念：子元素事件触发，则该元素所有祖先元素均会被触发  
阻止冒泡方法：

event.stopPropagation();

# 2.问题 #

*  DOM事件的级别（体现在题目中）
 *  DOM事件模型、DOM事件流（前者为捕获和冒泡，后者为事件传递的3个阶段）
 *  描述DOM事件捕获的具体流程（讲的是事件的传递顺序，参数为false和true时分别在什么阶段触发）
 *  Event对象常见应用/api方法(DOM事件的知识点，包括（1）事件的流程；（2）怎么注册事件；（3）在相应时，Event对象很重要)
 *  自定义事件【重要】
 *  事件委托（业务中经常用到）

# 3.解决方法 #

## 3.1 DOM事件级别 ##

*  DOM0：

element.onclick=function(){ }

*  DOM2：

element.addEventListener('click', function () { 
        }, false);

*  DOM3：增加了如鼠标事件、键盘事件等

element.addEventListener('keyup', function () { 
        }, false);

## 3.2 DOM事件模型、DOM事件流 ##

1.DOM事件模型：捕获和冒泡  
2.DOM事件流分为3个阶段，实质是事件是怎么传递到页面上的

*  捕获：从 window 对象传到 目标元素。
 *  目标阶段
 *  冒泡：从目标元素传到 Window 对象。

## 3.3 描述DOM事件捕获的具体流程 ##

*  捕获阶段，传递顺序：window，document，html，body，父元素，子元素，目标元素
 *  参数为false（默认）、参数为true，各自代表事件在捕获阶段和冒泡阶段触发。

## 3.4 Event对象常见应用/api方法 ##

用户做的是什么操作（比如，是敲键盘了，还是点击鼠标了），这些事件基本都是通过Event对象拿到的。

1.阻止默认事件，如阻止链接的默认跳转

event.preventDefault();//[prɪˈvent]

2.阻止冒泡

event.stopPropagation();

3.设置事件优先级：在事件A的响应函数中加入这句话。

event.stopImmediatePropagation();

4.事件委托中用到：绑定父元素、绑定子元素

event.currentTarget   //当前所绑定的事件对象。在事件委托中，指的是【父元素】。
    event.target  //当前被点击的元素。在事件委托中，指的是【子元素】。

## 3.5 自定义事件 ##

*  创建对象
 *  绑定事件
 *  注册事件

var myEvent = new Event('clickTest');
        element.addEventListener('clickTest', function () { 
            console.log('smyhvae');
        });
    	//元素注册事件
        element.dispatchEvent(myEvent); //注意，参数是写事件对象 myEvent，不是写 事件名 clickTest

## 3.6 事件委托 ##

*  概念：，就是**把一个元素响应事件（click、keydown…）的函数委托到另一个元素。**
 *  比较好的方法就是把这个点击事件**绑定到他的父层**，在执行事件的时候再去**匹配判断目标元素**。如：

document.getElementById("parent-list").addEventListener("click", function (e) { }, false);

原理:为父节点注册click事件，**当子节点被点击的时候，click事件会从子节点开始向上冒泡**。父节点捕获到事件之后，开始执行方法体里的内容：通过判断 e.target 拿到了被点击的子节点li。从而可以获取到相应的信息，并作处理。

*  好处：**事件委托可以减少大量的内存消耗，提高效率。**