浏览器事件：为什么会有捕获过程和冒泡过程？

浏览器事件

事件概述

一般个人设备的输入有：

键盘
鼠标
触摸屏

这其中，触摸屏和鼠标又有一定的共性，它们被称作pointer设备，所谓pointer设备，是指它的输入最终会被抽象成屏幕上面的一个点。现代的UI系统，都源自WIMP系统。WIMP即Window Icon Menu Pointer四个要素，它最初由施乐公司研发，后来被微软和苹果两家公司应用在了自己的操作系统上

捕获与冒泡

捕获过程是从外向内，冒泡过程是从内向外。实际上点击事件来自触摸屏或者鼠标，鼠标点击并没有位置信息，但是一般操作系统会根据位移的累积计算出来，跟触摸屏一样，提供一个坐标给浏览器。那么，把这个坐标转换为具体的元素上事件的过程，就是捕获过程了。而冒泡过程，则是符合人类理解逻辑的：当你按电视机开关时，你也按到了电视机。捕获是计算机处理事件的逻辑，而冒泡是人类处理事件的逻辑。在我们实际监听事件时，我建议这样使用冒泡和捕获机制：默认使用冒泡模式，当开发组件时，遇到需要父元素控制子元素的行为，可以使用捕获机制。 addEventListener有三个参数：

事件名称
事件处理函数
捕获还是冒泡

第三个参数不一定是bool值，也可以是个对象，它提供了更多选项。

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

实际使用，在现代浏览器中，还可以不传第三个参数

焦点

焦点系统认为整个UI系统中，有且仅有一个“聚焦”的元素，所有的键盘事件的目标元素都是这个聚焦元素。浏览器API还提供了API来操作焦点

document.body.focus();document.body.blur();

其实原本键盘事件不需要捕获过程，但是为了跟pointer设备保持一致，也规定了从外向内传播的捕获过程。

自定义事件

实际上事件也是一种非常好的代码架构，但是DOM API中的事件并不能用于普通对象，所以很遗憾，我们只能在DOM元素上使用自定义事件。

var evt = new Event("look", {"bubbles":true, "cancelable":false});
document.dispatchEvent(evt);

这里使用Event构造器来创造了一个新的事件，然后调用dispatchEvent来在特定元素上触发。我们可以给这个Event添加自定义属性、方法。

浏览器事件：为什么会有捕获过程和冒泡过程？相关推荐

浏览器事件捕获冒泡以及阻止冒泡
浏览器事件捕获冒泡以及阻止冒泡一.浏览器的dom事件流 dom事件流有三个阶段,捕获阶段->目标阶段->冒泡阶段,不管是有没有绑定事件,只要发生点击事件,事件的处理将从DOM层次的根开始 ...
浏览器事件循环机制与Vue nextTick的实现
浏览器事件循环机制先上一段简单的代码 console.log('aa'); setTimeout(() => { console.log('bb')}, 0); Promise.resolve ...
浏览器事件代理机制原理？
关于浏览器事件代理弄明白浏览器事件代理事前,先了解下事件.事件流. 一,事件 HTML DOM 允许 JavaScript 对 HTML 事件作出反应.即操作对应HTML元素时,会触发相应事件(包含 ...
[JS] 事件冒泡，阻止事件冒泡，事件的三个阶段（捕获，目标，冒泡）
事件冒泡添加三个套在一起的div元素,在最里面放一个button,感受事件触发时从里到外"冒泡"的过程. 给每个div都加一个事件:点击时就alert test.html < ...
【前端】跨浏览器事件处理程序EventUtil.js个人注释及详解
<javascript高级程序设计>跨浏览器事件处理程序EventUtil.js个人注释 EventUtil.js // 跨浏览器事件处理程序封装 var EventUtil = {// ...
5调用外部浏览器打开代码_浏览器事件循环
浏览器运行过程中会同时面对多种任务,用户交互事件(鼠标.键盘).网络请求.页面渲染等.而这些任务不能是无序的,必须有个先来后到,浏览器内部需要一套预定的逻辑来有序处理这些任务,因此浏览器事件循环诞生了 ...
JavaScript单线程和浏览器事件循环简述
JavaScript单线程在上篇博客<Promise的前世今生和妙用技巧>的开篇中,我们曾简述了JavaScript的单线程机制和浏览器的事件模型.应很多网友的回复,在这篇文章中将继续展 ...
浏览器事件模型与jquery事件
首先看一下浏览器事件模型: 可见,浏览器在解析时候,要过两遍HTML,一次是从上而下,称为事件捕获:一次从下而上,称为事件冒泡(关于事件冒泡和事件捕获,这里就不详细说了). 停止冒泡的方式:e.sto ...
JS之事件处理（一）--事件概述、非IE浏览器/IE浏览器中的事件绑定、解决浏览器事件绑定兼容性问题
一.概述描述:事件本质是一种交互操作,事件通常与函数配合使用,当事件发生时函数才会执行事件是由三部分组成的:事件源事件类型事件处理程序事件源:事件被触发的对象–谁事件类型:如何触发什么事 ...
[js] 在DOM上同时绑定两个点击事件（一个用捕获，一个用冒泡），事件总共会执行几次，先执行哪个事件？
[js] 在DOM上同时绑定两个点击事件(一个用捕获,一个用冒泡),事件总共会执行几次,先执行哪个事件? 两次先捕获,后冒泡个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一 ...

浏览器事件：为什么会有捕获过程和冒泡过程？

浏览器事件

浏览器事件：为什么会有捕获过程和冒泡过程？相关推荐

最新文章

热门文章