每日一博 | React 事件系统是如何工作的?
一、DOM 事件流 在浏览器中,我们通过事件监听来实现 JS 和 HTML 之间的交互。一个页面往往会被绑定许许多多的事件,而页面接收事件的顺序,就是事件流。它类似于蹦床,从高处下落,触达蹦床后再弹起,整个过程呈一个V字形。若按W3C标准,一个事件的传播过程要经过三个阶段 1、DOM 事件流的三个阶段 事件捕获阶段 事件从最外层的元素开始“穿梭”,逐层“穿梭”,直到目标元素,也就是真正触发事件的元素 目标阶段 事件被目标元素所接收 事件冒泡阶段 事件被“回弹”,沿着来时的路“逆流而上”,逐层往上 2、事件委托 假设我们有这么一个场景:在拥有1000个li元素的列表上,点击每一个li输出其对应的文本内容 很直观的一个思路:让每个li元素去监听一个点击动作,但这样重复的代码不够优雅,开销也蛮大。若利用 DOM 事件流的事件冒泡特性,我们可以这么做:把多个子元素的同一类型的监听逻辑合并到父元素上,通过一个监听函数来管理行为,即通过事件对象中的target属性,获取到真正触发事件的元素,这也是所谓的事件委托 let ul = document.getElementsByTagName('ul'...

