事件代理的应用

前端开发中,有一些高级的方法,学习后可以让你开发的效率提高,让你解决问题的能力增进,让你项目的质量也随之提升。而事件代理(event delegation)就是这些方法中的基础方法之一。这种代理的思想实际就是一种观察者模式(在外层观察变化),那么究竟它该怎么用呢? (文章中所有代码运行截图为在 webkit 调试器的控制台中输出图)

一、什么是事件代理

事件代理(event delegation),也有人翻译为“事件委托”,是一种利 Javascript 事件冒泡特性的高级方法。当有多个子元素或者子元素经常变化时,通过事件代理可以只监听父级元素事件,这样就避免了把事件处理器添加到多个子级元素上。一般情况下这样做效率更高,而且代码结构更加清晰,易于后续操作和管理。

二、事件代理的应用

事件代理最常用在子元素较多,或者会变化的情况。比如,如果我们有一个table,而这个 table 中有无数多个 td,难道我们要为每一个 td 绑定一个事件嘛?当然不用,所以此时就可以使用事件代理。如图1:

alt 1

图1

这就是事件代理的基本原理,但是这样使用太繁琐了,tangram2.0 提供了一个强大易用的事件代理方法 —— baidu.dom().delegate()。同样的功能,我们可以这样轻易的实现。 如图2:

alt 2

图2

如果你想要解除事件代理,tangram2.0也提供了undelegate方法,方便你的操作。用法和delegate方法类似,如图3:

alt 3

图3

也可以是通过 AJAX 拉取数据后,写入到子元素中的情况,使用事件代理不必担心子元素的事件没有被移除。

二、事件代理的优缺点

优点归结如下:

1、当遇到子元素非常多时,使用事件代理无疑大大的减少了浏览器在内存中创建的事件监听处理器,提高了性能,降低了内存消耗;

2、当子元素可能会不断地被增加、删除或者替换时,使用事件代理就避免出现某些元素的事件没有被移除,造成内存泄露的风险;

3、代码管理更加清晰,外层做统一的事件管理,易于修改和扩展。

缺点:

缺点不是很明显,但是仍然可能发生。事件代理本身的事件管理代码可能会成为性能瓶颈,因为不是所有事件都可以冒泡,如 blur、focus、load 和 unload。事件代理器中就会对类似事件做处理,还有 mousemove 和 mouseout 等事件,会被不停的触发,而不是只触发一次,这些也可能会造成性能瓶颈,但其实都不是很明显。

三、事件代理的高级应用

事件代理有诸多优点,已经广泛用在各种前端项目中,而结合事件代理使用的最佳工具则是前端模板。顾名思义,就是用 javascript 实现的某种模板语法,支持各种后端模板的类似功能。百度JS组出品了一个最接近 Javascript 语法的 JS 前端模板引擎,已广泛用于百度各产品线中,推荐使用。官网地址: http://baidufe.github.com/BaiduTemplate/

为什么说前端模板最适合结合事件代理呢?因为前端模板的使用往往需要很多的Dom变化操作,而模板中绑定事件也较为复杂,尤其是不好扩展模板。所以不如在预加载模板的外层做事件代理,这样更加易于管理。

高级方法学习和使用起来是需要花些事件的,即所谓的学习成本,但是一旦掌握了,必然是事半功倍,大大提高开发效率和代码的管理能力

感谢阅读,希望给你的开发带来帮助! 欢迎关注,JS小组官方微博:http://weibo.com/baidujs