首页 > 代码库 > 关于事件优化
关于事件优化
关于事件绑定
以如下的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>
关于事件优化
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。