前端基础知识（看一眼就好）
前端基础知识点
1.事件委托
事件捕获
- 事件捕获中，父级元素先触发，子集元素后触发
- 事件会从最外层开始，直到具体的元素，比如click的捕获过程document->html->body->div->p
事件冒泡
- 事件冒泡时，子元素先出发，父级元素后触发
- 元素自身事件被触发后，如果父元素有相同的事件，那么元素本身的触发状态就会传递，就是冒到父元素，父元素相同事件也会一级级向外触发
事件代理
- 事件委托，通俗地来讲，就是把一个元素响应事件（click、keydown......）的函数委托到另一个元素
- 一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数
优点
- 减少了事件注册，节省了内存，如在 table 上代理所有 tr 的 click 事件
- 简化了 dom 更新时的事件操作，如现在 table 内增加了一行 tr，不用再为这个 tr 添加事件了
缺点
- 事件委托基于冒泡，不冒泡的事件无法委托，如 blur、focus、mouseenter、mouseleave、input、keydown、keyup
- 可能被中间层阻止
- 事件会频繁的被调用，比如 tr 的事件被代理到 body 上
- 如果把所有事件都用事件委托,可能会出现事件误判,即不该触发事件的被绑定了
2.BFC（Block Formatting Context，块格式化上下文）
BFC的触发条件
- 根元素（
<html>）
- float值非none
- overflow值非visible
- display值为inline-block、table-cell、table-caption、flex、inline-flex
- position值为absolute、fixed
BFC的特性
- 属于同一个BFC的两个相邻容器的上下margin会重叠（重点）
- 计算BFC高度时浮动元素也参与计算（重点）
- BFC的区域不会与浮动容器发生重叠（重点）
- BFC内的容器在垂直方向依次排列
- 元素的margin-left与其包含块的border-left相接触
- BFC是独立容器，容器内部元素不会影响容器外部元素
