重学前端学习笔记（三十七）--浏览器事件

最新推荐文章于 2021-07-12 10:28:39 发布

weixin_30502157

最新推荐文章于 2021-07-12 10:28:39 发布

阅读量97

点赞数

文章标签：前端操作系统 ui ViewUI

原文链接：https://juejin.im/post/5d1b5d72e51d45108223fcbf

版权

笔记说明

重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有winter的语音】，如有侵权请联系我，邮箱：kaimo313@foxmail.com。

一、介绍

这一篇主要学习一下浏览器部分的事件。

二、事件概述

2.1、pointer 设备

所谓 pointer 设备，是指它的输入最终会被抽象成屏幕上面的一个点。比如触摸屏和鼠标。

2.2、WIMP 系统

现代的 UI 系统，都源自 WIMP 系统。WIMP 即 Window Icon Menu Pointer 四个要素，它最初由施乐公司研发，后来被微软和苹果两家公司应用在了自己的操作系统上。

三、捕获与冒泡

3.1、简述

实际上鼠标点击时并没有位置信息，但是一般操作系统会根据位移的累积计算出来，跟触摸屏一样，提供一个坐标给浏览器。把这个坐标转换为具体的元素上事件的过程，就是捕获过程。而冒泡过程，则是符合人类理解逻辑的：比如你摸了我的手时，你也摸了我到了我这个人。可以认为，捕获是计算机处理事件的逻辑，而冒泡是人类处理事件的逻辑。

3.2、事件传播顺序

在一个事件发生时，捕获过程跟冒泡过程总是先后发生，跟你是否监听毫无关联。

<body>
  <input id="i"/>
</body>
复制代码

document.body.addEventListener("click", () => {
    console.log(1)
}, true)

document.getElementById("i").addEventListener("click", () => {
    console.log(2)
}, true)

document.body.addEventListener("click", () => {
    console.log(3)
}, false)

document.getElementById("i").addEventListener("click", () => {
    console.log(4)
}, false)

// 输出顺序
1 2 4 3
复制代码

3.3、监听事件 API

addEventListener 有三个参数：事件名称、事件处理函数、捕获还是冒泡。

1、事件处理函数不一定是函数

// 具有 handleEvent 方法的对象
var o = {
  handleEvent: event => console.log(event)
}
document.body.addEventListener("keydown", o, false);
复制代码

2、第三个值可以是个对象，它提供了更多选项

once：只执行一次。
passive：承诺此事件监听不会调用 preventDefault，这有助于性能。
useCapture：是否捕获（否则冒泡）。

四、焦点

4.1、键盘事件

键盘事件是由焦点系统控制的，一般来说，操作系统也会提供一套焦点系统，但是现代浏览器一般都选择在自己的系统内覆盖原本的焦点系统。

1、焦点系统认为整个 UI 系统中，有且仅有一个“聚焦”的元素，所有的键盘事件的目标元素都是这个聚焦元素。

2、Tab 键被用来切换到下一个可聚焦的元素，焦点系统占用了 Tab 键，但是可以用 JavaScript 来阻止这个行为。

3、浏览器 API 还提供了 API 来操作焦点，如：

document.body.focus();

document.body.blur();
复制代码

五、自定义事件

参考MDN文档

Events 可以使用 Event 构造函数创建如下：

var event = new Event('build');

// Listen for the event.
elem.addEventListener('build', function (e) { ... }, false);

// Dispatch the event.
elem.dispatchEvent(event);
复制代码

转载于:https://juejin.im/post/5d1b5d72e51d45108223fcbf

weixin_30502157

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
重学前端学习笔记（三十七）--浏览器事件

笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有winter的语音】，如有侵权请联系我，邮箱：kaimo313@foxmail.com。一、介绍这一篇主要学习一下浏览器部分的事件。二、事件概述2.1、pointer 设...
复制链接

扫一扫