知识卡片
事件传播的三阶段模型与事件委托
内容
浏览器里一次事件从发生到处理完毕要经过三个阶段:先是捕获阶段,从最外层的window开始沿DOM树往下走,依次经过每一层祖先元素,直到抵达真正触发事件的目标元素的父级;然后是目标阶段,在事件真正发生的那个元素上触发处理程序;最后是冒泡阶段,事件沿着刚才捕获走过的路径反向往外层传,依次在每个祖先元素上再触发一遍处理程序,直到到达window。这个反向传播的冒泡阶段带来一个重要的实践模式——事件委托:与其给列表里成百个子元素逐一挂载点击处理程序,不如只在它们共同的父容器上挂一个处理程序,借着冒泡把子元素上发生的事件”捎带”到父容器来统一处理,再通过事件对象里”实际点击的是哪个元素”这个信息做分发。这不只是性能优化,更是让动态增删的子元素不需要每次重新挂载处理程序,天然适配内容会变化的列表和表格。
参考来源
《JavaScript权威指南(原书第6版)》第17章《事件处理》