Web前端最全JS事件简单总结，2024年最新面试篇字节跳动审核

HTTP

• HTTP 报文结构是怎样的？

• HTTP有哪些请求方法？

• GET 和 POST 有什么区别？

• 如何理解 URI？

• 如何理解 HTTP 状态码？

• 简要概括一下 HTTP 的特点？HTTP 有哪些缺点？

• 对 Accept 系列字段了解多少？

• 对于定长和不定长的数据，HTTP 是怎么传输的？

• HTTP 如何处理大文件的传输？

• HTTP 中如何处理表单数据的提交？

• HTTP1.1 如何解决 HTTP 的队头阻塞问题？

• 对 Cookie 了解多少？

• 如何理解 HTTP 代理？

• 如何理解 HTTP 缓存及缓存代理？

• 为什么产生代理缓存？

• 源服务器的缓存控制

• 客户端的缓存控制

• 什么是跨域？浏览器如何拦截响应？如何解决？

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

因为标准的事件传播机制有捕获和冒泡阶段，这里最后一个参数useCapture表示是否在事件捕获阶段就执行回调函数，默认为false。一般情况下，我们使用默认值，即在事件冒泡阶段执行函数。为什么？主要是为了兼容旧版的IE。

---

事件常见属性

我们已经知道，事件的回调函数中有个事件对象的参数。从第一部分，我们已经看到Event对象的继承关系，比如我们最常见的鼠标事件或者键盘事件，MouseEvent继承自UIEvent，UIEvent继承自Event。我们参考最新的W3C规范，来具体看下。

[Constructor(DOMString type, optional EventInit eventInitDict),
Exposed=(Window,Worker)]
interface Event {
// 事件的类型，比如click，submit，load等
readonly attribute DOMString type;
// 触发事件的那个目标元素
readonly attribute EventTarget? target;
// 事件传播所在的当前元素
readonly attribute EventTarget? currentTarget;
const unsigned short NONE = 0;
const unsigned short CAPTURING_PHASE = 1;
const unsigned short AT_TARGET = 2;
const unsigned short BUBBLING_PHASE = 3;
// 事件所在的阶段，枚举值如上
readonly attribute unsigned short eventPhase;
// 阻止事件的冒泡，在当前元素的冒泡执行完之后
void stopPropagation();
// 立即阻止冒泡，包括当前元素还有其他的回调事件
// DOM3增加新属性
void stopImmediatePropagation();
// 是否在冒泡阶段
readonly attribute boolean bubbles;
// 是否可以被取消，用preventDefault取消
readonly attribute boolean cancelable;
// 取消当前元素的默认事件，前提是cancelable为true
void preventDefault();
// 是否被preventDefault过，DOM3增加新属性
readonly attribute boolean defaultPrevented;
// 事件是否有用户触发的
[Unforgeable] readonly attribute boolean isTrusted;
// 当前时间戳
readonly attribute DOMTimeStamp timeStamp;
void initEvent(DOMString type, boolean bubbles, boolean cancelable);
};

dictionary EventInit {
boolean bubbles = false;
boolean cancelable = false;
};

[Constructor(DOMString type, optional MouseEventInit eventInitDict)]
interface MouseEvent : UIEvent {
// 相对屏幕的x,y坐标
readonly attribute long screenX;
readonly attribute long screenY;
// 相对浏览器可视区域的x，y坐标
readonly attribute long clientX;
readonly attribute long clientY;
//是否按下这些特殊的键
readonly attribute boolean ctrlKey;
readonly attribute boolean shiftKey;
readonly attribute boolean altKey;
readonly attribute boolean metaKey;
//哪个鼠标键被按下，0主键，1滚轮，2附键，只在mouseup，mousedown事件中有效
readonly attribute short button;
// 被激活的鼠标，可以是多个，0没有，1主键，2附键，4滚轮，8后退？，16前进？
// 还可以相加，比如按下了主键和滚轮，就是1+4 = 5
readonly attribute unsigned short buttons;
readonly attribute EventTarget? relatedTarget;
boolean getModifierState(DOMString keyArg);
};

以上是规范，但实际上浏览器的实现上好像还有很多杂七杂八的属性。以下是在Chrome 56输出的结果。

---

MouseEvent

感觉眼睛都要花了，比较常用的感觉不多，也看场景吧。一般比如target，preventDefalut，stopPropagation，type，以及坐标的属性比较常用吧。

由于浏览器的历史原因，关于鼠标坐标的属性真是好多对：

属性描述x, y在整个浏览器窗口所处的位置screenX, screenY在整个屏幕中所处于位置clientX, clientY在整个浏览器窗口所处的位置，与x, y属性相同layerX, layerY在整个元素的区域鼠标的位置(但算上了scroll的距离)，当不随页面滚动而变化pageX, pageY在整个页面所处的位置，当不随页面滚动而变化offsetX, offsetY在整个元素的区域，鼠标的位置，当不随页面滚动而变化movementX, movementY两个事件之间鼠标的位移差

最好使用W3C规范里面的两对属性，是最安全和最保险的选择，screenX, screenY, clientX, clientY。

简单的兼容实现

主要是考虑对IE8及其以下的兼容性。

function addEventListener(target, event, callback)
if( window.addEventListener ){
target.addEventListener(event, callback)
}
else if(window.attachEvent){
target.attachEvent(‘on’ + event, callback);
}
else{
target[‘on’ + event] = callback;
}
}

事件的执行顺序

我们用一个简单的例子在Chrome 56中做测试。

当点击parent div的时候输出如下：

parent capture target
parent dom0 js target
parent bubble target

而点击child div的时候输出如下：

parent capture capture
child dom0 html target
child bubble target
child capture target
parent dom0 js bubble
parent bubble bubble

当你不断地调整那些事件的顺序，或者引入js的onclick函数，你会发现以下规律：

1. 当html中有onclick事件，js中也有onclick事件的时候，js中onclick事件会覆盖html中的事件。因为其实它们是同一个属性。
2. 目标元素的事件执行顺序跟定义的顺序一致，而不会按照先捕获后冒泡的顺序。在html中定义的事件排在第一个。
3. 非目标事件的函数执行遵守先捕获后冒泡的规律，并且DOM0级元素定义的事件会在冒泡阶段先执行，不管是在html定义还是用js定义。

另外，如果一个事件多次绑定，只会执行一次。

---

事件this指向

对于DOM0级的this情况如下。

HTTP

• HTTP 报文结构是怎样的？

• HTTP有哪些请求方法？

• GET 和 POST 有什么区别？

• 如何理解 URI？

• 如何理解 HTTP 状态码？

• 简要概括一下 HTTP 的特点？HTTP 有哪些缺点？

• 对 Accept 系列字段了解多少？

• 对于定长和不定长的数据，HTTP 是怎么传输的？

• HTTP 如何处理大文件的传输？

• HTTP 中如何处理表单数据的提交？

• HTTP1.1 如何解决 HTTP 的队头阻塞问题？

• 对 Cookie 了解多少？

• 如何理解 HTTP 代理？

• 如何理解 HTTP 缓存及缓存代理？

• 为什么产生代理缓存？

• 源服务器的缓存控制

• 客户端的缓存控制

• 什么是跨域？浏览器如何拦截响应？如何解决？

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

存控制

• 什么是跨域？浏览器如何拦截响应？如何解决？

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