快速搞定前端JS面试 -- 第八章JS-Web-API-事件（事件绑定、事件冒泡、事件代理）

const body = document.body

bindEvent(body, ‘click’, event => {

console.log(‘取消’)

// console.log(event.target)

})

const div2 = document.getElementById(‘div2’)

bindEvent(div2, ‘click’, event => {

console.log(‘div2 clicked’)

console.log(event.target)

})

获取触发元素： event.target输出事件是由哪个元素触发的

二、事件冒泡

---

****功能：****激活/取消状态切换（将取消事件绑定在body上，将激活事件绑定在p1上）

**对于嵌套事件输出的先后顺序：**冒泡，顺着DOM 结构向上级冒泡

如果不阻止事件冒泡，则，点击p1会输出：激活 取消（冒泡到body输出的取消）

阻止冒泡：stopPropagation()

激活

取消

取消

取消

取消

取消

三、事件代理

---

事件代理是在事件冒泡的机制下进行的

****1. 场景：****瀑布流

2. 例子描述

点击增加a标签，并且可以通过各种方式无限加载，因此div中不知道会有多少个a标签，无法一个一个绑定事件，因此这时候就可以把事件绑定到div上，当点击a标签时，会通过冒泡机制到div，再通过一些方法拿到a标签。即当数量比较多或者比较复杂，无法绑定事件时，可以将事件绑定到他的父元素上。

a1

a2

a3

a4

加载更多…

// 代理绑定

const div3 = document.getElementById(‘div3’)

bindEvent(div3, ‘click’, event => {

event.preventDefault()    // 阻止默认行为（页面页面调转）

const target = event.targrt

if (target.nodeNamr === ‘A’) {

alert(target.innerHTML)

}

})

阻止默认行为：event.preventDefault()

3. 事件代理的优点

1. 代码简介；（如果分析每个a标签，结构就比较复杂，要进行循环）

2. 减少浏览器内存使用；（如果含有a标签比较多，每个都绑定一个事件监听，耗内存）

（但是不要滥用）

4. 通用的事件绑定函数

要求：能支持普通的监听，也能支持代理情况的监听

function bindEvent(elem, type, selector, fn) {  // selector是个css选择器

if (fn == null) {   // 判断只传入三个参数

fn = selector

selector = null

}

elem.addEventListener(type, event => {

const target = event.target

if (selector) {

// 有selector时是代理绑定

if (target.matches(selector)) {  // 判断DOM元素是否符合css选择器

fn.call(target, event)

}

} else {

// selector为空，只有三个参数，是普通绑定

fn.call(target, event)

}

})

}

// 普通绑定

const btn1 = document.getElementById(‘btn1’)

bindEvent(btn1, ‘click’, function (event) {    // 注意不能使用箭头函数，否则获取的是上级window

// console.log(event.target) // 获取触发的元素

event.preventDefault()

alert(this.innerHTML)     // this

})

// 代理绑定

const div3 = document.getElementById(‘div3’)

bindEvent(div3, ‘click’, ‘a’, function (event) {

event.preventDefault()    // 阻止默认行为（页面页面调转）

alert(this.innerHTML) // 如果使用箭头函数的写法 event.target.innerHTML

})

四、问题解答

---

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

后记

---

总结一下这三次面试下来我的经验是：

1. 一定不要死记硬背，要理解原理，否则面试官一深入就会露馅！

2. 代码能力一定要注重，尤其是很多原理性的代码（之前两次让我写过Node中间件，Promise.all，双向绑定原理，被虐的怀疑人生）！

3. 尽量从面试官的问题中表现自己知识的深度与广度，让面试官发现你的闪光点！

4. 多刷面经！

我把所有遇到的面试题都做了一个整理，并且阅读了很多大牛的博客之后写了解析，免费分享给大家，算是一个感恩回馈吧，有需要的朋友【点击我】获取。祝大家早日拿到自己心怡的工作！

篇幅有限，仅展示部分内容

。祝大家早日拿到自己心怡的工作！**

篇幅有限，仅展示部分内容