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

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

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。从而可以获取到相应的信息，并作处理。

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