JavaScript的事件代理比你想的要简单
作者:罂粟 来源:译言 发布时间:2009-04-27 12:40:00
如果你想进一步了解如何用JavaScript来为网页添加交互性的话,你也许已经听过JavaScript的事件代理(event delegation)了,并且会觉得只有那些牛逼烘烘的JavaScript程序员才会关心这样复杂的设计模式。事实上,如果你已经知道怎么样去添加JavaScript的事件处理器(event handler),实现事件代理也是件轻而易举的事情。
JavaScript事件是所有网页交互性的根基(我指的是真正的互动性,而不仅是那些CSS的下拉菜单)。在传统的事件处理中,你按照需要为每一个元素添加或者是删除事件处理器。然而,事件处理器将有可能导致内存泄露或者是性能下降——你用得越多这种风险就越大。JavaScript事件代理则是一种简单的技巧,通过它你可以把事件处理器添加到一个父级元素上,这样就避免了把事件处理器添加到多个子级元素上。
它是怎么运作的呢?
事件代理用到了两个在JavaSciprt事件中常被忽略的特性:事件冒泡以及目标元素。当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层。对任何一个事件来说,其目标元素都是原始元素,在我们的这个例子中也就是按钮。目标元素它在我们的事件对象中以属性的形式出现。使用事件代理的话我们可以把事件处理器添加到一个元素上,等待事件从它的子级元素里冒泡上来,并且可以很方便地判断出这个事件是从哪个元素开始的。
这对我有什么好处呢?
想象一下现在我们有一个10列、100行的HTML表格,你希望在用户点击某一单元格的时候做点什么。比如说有一次我就需要让表格中的每一个单元格在被点击的时候变成可编辑状态。如果把事件处理器加到这1000个单元格将会产生一个很大的性能问题,并且有可能导致内存泄露甚至是浏览器的崩溃。相反地,使用事件代理的话,你只需要把一个事件处理器添加到table
元素上就可以了,这个函数可以把点击事件给截下来,并且判断出是哪个单元格被点击了。
用代码写出来的话是什么样呢?
代码很简单,我们所要关心的只是如何检测目标元素而已。比方说我们有一个table
元素,ID是“report
”,我们为这个表格添加一个事件处理器以调用editCell
函数。editCell
函数需要判断出传到table
来的事件的目标元素。考虑到我们要写的函数中可能会重复用到这一功能,所以我们把它单独放到一个名为getEventTarget
的函数中:
function getEventTarget(e) { e = e || window.event; return e.target || e.srcElement;}
e
这个变量表示的是一个事件对象,我们只需要写一点点跨浏览器的代码来返回目标元素。在IE里目标元素放在srcElement
属性中,而在其它浏览器里则是target
属性。
接下来就是editCell
函数了,这个函数调用到了getEventTarget
函数。一旦我们得到了目标元素之后,剩下的事情就是看看它是否是我们所需要的那个元素了。
function editCell(e) { var target = getEventTarget(e); if(target.tagName.toLowerCase() === 'td') { // DO SOMETHING WITH THE CELL }}
在editCell
函数中,我们通过检查目标元素标签名称的方法来确定它是否是一个表格的单元格。这种检查也许过于简单了点;如果它是这个目标元素单元格里的另一个元素呢?我们需要为代码做一点快速修改以便于其找出我们所需要的那个父级的td
元素。如果说有些单元格不需要被编辑怎么办呢?此种情况下我们可以为那些不可编辑的单元格添加一个指定的样式名称,然后在把单元格变成可编辑状态之前先检查它是否不包含那个样式名称。选择总是多样化的,你只需找到适合你应用程序的那一种就可以了。
有哪些优点和缺点呢?
JavaScript事件代理带来的好处有:
那些需要创建的以及驻留在内存中的事件处理器少了。这是很重要的一点,我们得到了性能上的提升,同时降低了崩溃的风险。
在DOM更新后无须重新绑定事件处理器了。如果你的页面是动态生成的,比如说通过Ajax,你不需要再在元素被载入或者卸载的时候来添加或者删除事件处理器了。
潜在的问题也许并不那么明显,但是一旦你注意到这些问题,你就可以轻松地避免它们:
你的事件管理代码有成为性能瓶颈的风险,所以尽量使它能够短小精悍。
不是所有的事件都能冒泡的。
blur
、focus
、load
和unload
不能像其它事件一样冒泡。事实上blur
和focus
可以用事件捕获而非事件冒泡的方法获得(在非IE的浏览器中),不过我们改天再说这个吧。在管理鼠标事件的时候有些需要注意的地方。如果你的代码处理
mousemove
事件的话你遇上性能瓶颈的风险可就大了,因为mousemove
事件触发得非常频繁。而mouseout
则因为其怪异的表现而变得很难用事件代理来管理。
总结
已经有一些使用主流类库的事件代理示例出现了,比如说用jQuery、Prototype以及Yahoo! UI的。你也可以找到那些不用任何类库的例子,比如说Usable Type blog上的这一个。
在你需要的时候,事件代理将成为你工具箱里一件得心应手的工具,而且它真的很容易实现。
猜你喜欢
- 游标的使用提到游标这个词,人们想到的是在屏幕上一个闪动的方框,用以指示用户将要输入字符的位置。而在关系型数据库的SQL语言中,游标却有另外的
- 解决安装Office2003 SP2后不能打开Access的问题手动更改注册表要解决此问题, 手动更改计算机上注册表位置启动 Access
- 很久以前就知道微软的Petshop的很经典,昨天抽出时间去学习,一开始还真的不适应,什么成员资格,还真的看不太懂,运行petshop想从登陆
- Yoho, 大家好,又是我哟~ 首先抱歉让大家等了这么多时间。最近实在比较繁忙啦。不过我还是会尽量抽空出来给大家讲点有的没的,欢迎大家继续
- 浏览器经常Cache你的页面,这是一个很麻烦的问题,下面先提出几种方案来解决一般的问题:(把下面的代码加入到asp程序的最开始位置)<
- sql server端口,我们可以通过\"服务器端网络试用工具\"和\"客户端实用工具\"来设定,设
- 写入:1:把gif图像文件读入内存(一个变量strTemp)。2:写入数据库。Dim binTmp() As ByteDim conn As
- 八卦是种优良品质,特别是用在技术上时。来看几个Reset CSS的八卦问题吧:你知道世界上第一份reset.css在哪么?*&nb
- Tips 1:新增数据表与定义字段更加直观若要建立新数据表,可以在开启数据库后,直接单击“创建”标签,在“表”选项组中单击“表”按钮,即可新
- 简介:外部连接和自联接inner join(等值连接) 只返回两个表中联结字段相等的行left join(左联接) 返回包括左表中的所有记录
- 在ASP.net页面中,我们编写JavaScript脚本附加有注释时,这些注释也往往会随JavaScript脚本一起送到客户端。
- 由于日期存在不同位数的月份或天数,出现参差不齐,既不美观也在日期比较时不好操作。如使用本涵数就会排列整齐:'================
- 这些导航菜单来自于Dribbble网站,出自于世界各地的优秀设计师之手,涵盖了各种不同的风格,个个都非常精美。这里我将这些导航菜单展示出来,
- 看看这个指令在ASP程序中的应用,有[delete from 歌手 where 艺名='cs2000'],删除艺名为cs20
- 代码如下:use tempdb if object_id('tempdb..#table') is not null dro
- 块级元素块级元素生成一个元素框,(默认地)它会填充其父级元素的内容,旁边不能有其他元素。换句话说,他在元素框之前和之后生成了“分隔”符。我们
- 在VBScript中,有一个On Error Resume Next语句,它使脚本解释器忽略运行期错误并继续脚本代码的执行。接着该脚本可以检
- Web性能优化最佳实践中最重要的一条是减少HTTP请求,它也是YSlow中比重最大的一条规则。减少HTTP请求的方案主要有合并JavaScr
- 有时候我们可能不知道一个用户的密码,但是又需要以这个用户做一些操作,又不能去修改掉这个用户的密码,这个时候,就可以利用一些小窍门,来完成操作
- 早就想用一个系列的文章来写AJAX,让自己头到尾理一遍,更好的掌握基础知识(昨天的面试受打击了,基础知识很重要).要是写的好,也许也可以帮助