关于事件优化

Posted 2020-08-09 胖胖的半山兄

关于事件绑定

以如下的DOM举例

<ul>
        <li> </li>
        <li> </li>
        <li> </li>
        ...
        <li> </li>
</ul>

如果想要对所有的li标签进行绑定Click事件，传统写法是对每个li进行onClick。都知道在Js中每个函数都是会占用内存的，内存中的函数越多，整体性能就越差。

解决方案就是使用事件委托，将事件绑定在li标签的上层，例如ul。当然也可以在往上。

在Jquery中提供了bind、live、delegete以及on方法来实现对事件的委托

• bind 只存在的对象，当新增元素时不能委托
• live 默认绑定到document ，如果DOM嵌套结构很深，事件冒泡会导致性能损失； 
• delegete 自选绑定到某个对象
• on 建议

事件委托的原理在于利用事件冒泡

关于事件冒泡

对于事件冒泡，这就涉及到DOM0、DOM2

大体DOM0、DOM2区别在于：

1.Dom0 只支持冒泡，Dom2 均支持可指定事件触发的阶段

2.Dom0同个对象添加多个事件会覆盖，Dom2不覆盖

等

另外得注意的是，对于不同的浏览器，事件冒泡的节点还不一样。

 

建议：

当DOM嵌套结构不是很深时，可将事件委托给在body内最外层的div,例如<div class=‘container‘></div>