事件委托,事件代理
事件代理又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。顾名思义,“事件代理”即是把原本需要绑定在子元素的响应事件(click、keydown......)委托给父元素,让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。 事件传播分为三个阶段: 捕获阶段:从window对象传导到目标节点(上层传到底层)称为“捕获阶段”(capture phase),捕获阶段不会响应任何事件; 目标阶段:在目标节点上触发,称为“目标阶段” 冒泡阶段:从目标节点传导回window对象(从底层传回上层),称为“冒泡阶段”(bubbling phase)。事件代理即是利用事件冒泡的机制把里层所需要响应的事件绑定到外层; 可以大大优化内存占用,不用给每个子元素都添加事件。
原生事件委托的写法,拿ul li来测试
box.onclick = function (e) {
e.target.style.background="red"
}
回流和重绘
页面渲染时,先生成dom树,再结合css生成rander树 回流的成本更大 重绘不一定引起回流,但回流一定会引起重绘 尽量减少对dom的直接操作,减少回流的次数,可以大大提高性能