Web前端最全javascript事件处理总结，记录一次腾讯前端岗面试笔试总结

css

1，盒模型
2，如何实现一个最大的正方形
3，一行水平居中，多行居左
4，水平垂直居中
5，两栏布局，左边固定，右边自适应，左右不重叠
6，如何实现左右等高布局
7，画三角形
8，link @import导入css
9，BFC理解

js

1，判断 js 类型的方式
2，ES5 和 ES6 分别几种方式声明变量
3，闭包的概念？优缺点？
4，浅拷贝和深拷贝
5，数组去重的方法
6，DOM 事件有哪些阶段？谈谈对事件代理的理解
7，js 执行机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

关注大前端驿站。问题或建议，请公众号留言。

一、事件冒泡和事件捕获

点击

事件冒泡 从最具体的元素（文档树中最深的节点）开始触发，然后向上传播至没有那么具体的元素（文档），上述代码中点击

元素，最先触发click事件，然后，click 事件沿 DOM 树一路向上，在经过的每个节点上依次触发，直至到达 document 对象

事件捕获 最不具体的节点应该最先收到事件，而最具体的节点应该最后收到事件。事件捕获实际上是为了在事件到达最终目标前拦截事件，上述代码中点击

元素，最先到达document元素，最后达到

元素

二、事件处理程序

事件意味着用户或浏览器执行的某种动作。比如，单击（click）、加载（load）、鼠标悬停（mouseover）。为响应事件而调用的函数被称为事件处理程序（或事件监听器）

<input type=“button” value=“Echo Username”

οnclick=“console.log(username.value)”>

事件处理程序的代码就可以不必引用表单元素，而直接访问同一表单中的其他成员了

上述例子中，点击按钮会显示出文本框中包含的文本，注意，事件处理程序中的代码直接引用了username

<input type=“button” value=“Click Me”

οnclick=“try{showMessage();}catch(ex) {}”>

为防止在函数定义前触发事件处理程序，通常事件处理程序会封装在try/catch块中，以便在这种情况下静默失败

赋值和移除

• DOM2事件处理程序

赋值addEventListener()和移除removeEventListener()都接收3个参数：事件名、事件处理函数和一个布尔值（true表示在捕获阶段调用事件处理程序，false表示在冒泡阶段调用事件处理程序）

DOM2事件处理程序的主要优势是可以为同一个事件添加多个事件处理程序

let btn = document.getElementById(“myBtn”);

btn.addEventListener(“click”, () => {

console.log(this.id); // 点击按钮先打印元素ID

}, false);

btn.addEventListener(“click”, () => {

console.log(“Hello world!”); // 然后显示消息Hello world!

}, false);

需要特别注意的是，使用addEventListener()添加的匿名函数无法移除

// 匿名函数事件程序无法移除

let btn = document.getElementById(“myBtn”);

btn.addEventListener(“click”, () => {

console.log(this.id);

}, false);

// 其他代码

btn.removeEventListener(“click”, function() { // 没有效果！

console.log(this.id);

}, false);

// 建议以下形式抽取一个公共处理函数

let btn = document.getElementById(“myBtn”);

let handler = function() {

console.log(this.id);

};

btn.addEventListener(“click”, handler, false);

// 其他代码

btn.removeEventListener(“click”, handler, false); // 有效果！

• IE事件处理程序

IE 实现了与 DOM 类似的方法，即 attachEvent()和 detachEvent() 。这两个方法接收两个同样的参数：事件处理程序的名字和事件处理函数

与DOM2相同：使用 DOM 方法类似，作为事件处理程序添加的匿名函数也无法移除

与DOM2不同：同一事件添加多个事件处理程序时，以添加的顺序反向触发

三、内存与性能

JavaScript 中，页面中事件处理程序的数量与页面整体性能直接相关

• 每个函数都是对象，都占用内存空间，对象越多，性能越差

• 指定事件处理程序所需访问DOM的次数会造成整个页面交互的延迟

事件委托

当我们页面中的 处理程序过多时 ，可以采用的解决方案是使用 事件委托

我们可以利用事件冒泡的特性，只使用一个事件处理程序来管理一个类型的事件

这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」，内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中，共计111道

HTML

• HTML5有哪些新特性？

• Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?

• 如何实现浏览器内多个标签页之间的通信？

• ⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？⾏内元 素和块级元素有什么区别？

• 简述⼀下src与href的区别？

• cookies,sessionStorage,localStorage 的区别？

• HTML5 的离线储存的使用和原理？

• 怎样处理 移动端 1px 被 渲染成 2px 问题？

• iframe 的优缺点？

• Canvas 和 SVG 图形的区别是什么？

JavaScript

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 问：0.1 + 0.2 === 0.3 嘛？为什么？

• JS 数据类型

• 写代码：实现函数能够深度克隆基本类型

• 事件流

• 事件是如何实现的？

• new 一个函数发生了什么

• 什么是作用域？

• JS 隐式转换，显示转换

• 了解 this 嘛，bind，call，apply 具体指什么

• 手写 bind、apply、call

• setTimeout(fn, 0)多久才执行，Event Loop

• 手写题：Promise 原理

• 说一下原型链和原型链的继承吧

• 数组能够调用的函数有那些？

• PWA使用过吗？serviceWorker的使用原理是啥？

• ES6 之前使用 prototype 实现继承

• 箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？

• 事件循环机制 （Event Loop）

etTimeout(fn, 0)多久才执行，Event Loop

• 手写题：Promise 原理

• 说一下原型链和原型链的继承吧

• 数组能够调用的函数有那些？

• PWA使用过吗？serviceWorker的使用原理是啥？

• ES6 之前使用 prototype 实现继承

• 箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？

• 事件循环机制 （Event Loop）