万峰’s Blog

JavaScript的事件代理

Kelvin — Tue, 02 Mar 2010 02:15:20 +0000

如果你想进一步了解如何用JavaScript来为网页添加交互性的话，你也许已经听过JavaScript的事件代理（event delegation）了，并且会觉得只有那些牛逼烘烘的JavaScript程序员才会关心这样复杂的设计模式。事实上，如果你已经知道怎么样去添加JavaScript的事件处理器（event handler），实现事件代理也是件轻而易举的事情。

JavaScript事件是所有网页交互性的根基（我指的是真正的互动性，而不仅是那些CSS的下拉菜单）。在传统的事件处理中，你按照需要为每一个元素添加或者是删除事件处理器。然而，事件处理器将有可能导致内存泄露或者是性能下降——你用得越多这种风险就越大。JavaScript事件代理则是一种简单的技巧，通过它你可以把事件处理器添加到一个父级元素上，这样就避免了把事件处理器添加到多个子级元素上。

它是怎么运作的呢？

事件代理用到了两个在JavaSciprt事件中常被忽略的特性：事件冒泡(Event Bubbling)以及目标元素。当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到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可以用事件捕获(Event Capturing)而非事件冒泡的方法获得（在非IE的浏览器中），不过我们改天再说这个吧。
在管理鼠标事件的时候有些需要注意的地方。如果你的代码处理mousemove事件的话你遇上性能瓶颈的风险可就大了，因为mousemove事件触发得非常频繁。而mouseout则因为其怪异的表现而变得很难用事件代理来管理。

总结

已经有一些使用主流类库的事件代理示例出现了，比如说用jQuery、Prototype以及Yahoo! UI的。你也可以找到那些不用任何类库的例子，比如说Usable Type blog上的这一个。

在你需要的时候，事件代理将成为你工具箱里一件得心应手的工具，而且它真的很容易实现。

透支爱情

Kelvin — Mon, 22 Feb 2010 06:16:17 +0000

辞旧迎新

Kelvin — Thu, 11 Feb 2010 06:17:02 +0000

今天是09年最后一天上班，明早这个时候差不多已经在回家的路上了。

每年年末到这个时候都会感叹很多：回顾一年来发生了哪些事情、计算下年终了卡里能剩余多少数字、盘算下明年是否有个新的动向。

总之，时间不等人，09只能留在记忆里了！

其实本不该为这一年份做个总结的，因为始终觉得09并不算一个节点，从毕业那一刻到现在，三年过去了，总是在迷糊中思索，从梦幻中搜寻一点点有价值有意义的事情来，可最后都以失败而告终。回过头去看看，只能发现很多可悲的事情，现实与想象这是完全两个概念吧。

即使你有再大的激情与努力，可在心理底线被冲破的那一霎那，所有的付出都前功尽弃了，与其说被动不如说人都是懒惰的，在奋进的余温迸发还剩下一丝余热的那一刻，思绪是混乱的，没错我就是想奋斗！

这几年总是在抱怨，总是在等待，有点不思进取！真心希望能尽快从这个思绪中走出来！

其实做一个普普通通的人最好了，但是一定要努力，很喜欢喜欢玉伯的名言：“崇尚简洁而不简单，相信付出才有收获！”，崇拜的五体投地！懂得付出、懂得勤劳致富比什么都好，人生值得回味的一遭并不是曾经的美好，而是曾经的沧桑！藏在记忆中的是拼搏进取和初尝收获的那种喜悦！

生活应该充满自信，自信可以使人勇敢的面对未来每一天的生活，在这个充满希望的城市里，让该发光的东西都散发五彩魅力！

“舍得”这个词大家都知道，这两个字不是无缘无故搭配在一起的，为什么不叫“得舍”呢？因为先“舍”然后才能是“得”！

幸福是靠自己去争取的，一味的抱怨生活，抱怨人生，只会自寻烦恼！同时生活不应该自寻烦恼，快乐能使人心情舒畅，更好的面对接下去的酸甜苦辣！

当然生活也不是一帆风顺的，先苦后甜，忆苦思甜，苦中作乐，平常心对待它！

可能你觉得这些年过去了，什么变化没有发生，其实真正的变化在心理，生活不是想象出来的，生活是锻炼出来的！

每个人都会在经历过一段沉迷期才会东西珍惜，“珍惜”这个词并非无中生有，往往有价值的东西都是最后才被发现的！

其实道理说在这里谁都懂，可碰到问题的时候又有谁能按部就班的遵循这个规则呢？

总感觉心理住着两个人：一个是慈祥的上帝，一个是狰狞的魔鬼！

如果上帝给了你一个重新来过的机会，你会不会选择一个美好的开始呢？当然不可能有这个机会的，因为魔鬼就在你的身边！

心理不想对10年期待太多，因为害怕期望的越高，失落感越大！也因为接下去要面对的事情太多太多，害怕哪天突然承受不起而崩溃！

看着身边的同学们都勇敢的迈进了自己的生活目标中，同时在努力尝试着新的生活，自叹又无奈，心理终归不成熟，逃避不出自己的阴暗角落！

还记得去年春节在家里的时候，高中同学跟我说他在08年做的三件大事：辞职创业店面开张、买房、结婚。好像顺理成章的一条路，而我却连一条都没经历，想想人家现在在幸福的营造未来，而我却还在这个小小的博客上发牢骚呢！苦笑……

想归想，做归做，10年还是得按部就班的往下走。

借2010的光芒许三个愿望：

我爱的人和爱我的人、我关心的人和关心我的人都健健康康、平平安安！
可以实现一套自己的住房！
和小样能幸福的走到一起！

明年我还将一如既往的继续前端开发学习之路！希望会是合格的一年，发扬中庸之道！

巩固css，切入css3话题！
挑战无极限，深入改造javascript！
不管大小做一套属于自己cms系统！

当然最希望的就是待遇能提升一个台阶，不然有了住房供起来就痛苦了哦！

生活 && 勇气

Kelvin — Fri, 22 Jan 2010 11:36:11 +0000

——假的、真的、错的、对的、坏的、好的、痛苦的、快乐的、面对的、逃避的、虚伪的、真诚的、不公平的、公平的！

胃胀了一夜，躺了一天，越想越难受！不想写出来，会让人可怜兮兮的，索性还是在个人blog上释放一下。

又有一个同事今天走了，公司现在的状况越来越让人担心了……

看了一周的php视频教程，加深了对以前的巩固，感觉还是挺受用的，关注前端开发很久了，实际操作中却摸索的比较吃力，一直觉得很多深层次的概念还是比较匮乏……

从见面到昨天为止，算算已经有68天了，两个多月，不多不少啊，又是一个节点，糊里糊涂开心过、压抑过，不知道该用什么词评价现在的心情，一股脑全涌上来了，我真的觉得自己是个很容易就伤感的人，也许是太多太多压抑了吧……越长大越孤单，一直都把生活想象的太简单，为了不伤害到人家的感情和幸福，我逃避的太多了，经受不起悲伤离别之苦，那滋味可不像喝了一瓶白酒后还跟个没事人似的，有苦你就往肚子里咽。

你说女孩子伤心会大哭一场，可男孩子该怎么去承受？抽烟？喝酒？我不喜欢太顺利的事情，过后想想会很后怕，来的容易消失的也容易！

昨天看了一下午小胖的日志，记忆里的东西太少了，写下来还真能回顾一下，那小子以前一直觉得写的都是些莫名其妙的文章，但是现在看起来还挺伤感的，有些女孩子的心都是水做的，说出来的话做出来的事都是不需要承担责任的，不知道这话说的重不重，但是对于我们这些大男孩来讲，受伤的却总是我们！

一直想找个机会去无锡灵山大佛看看，可是总是在挤出时间后忘却了，有种罪恶感！来无锡这么久了，风风雨雨走过了这么多路，其实还是挺留恋的，好几次说要离开，可最后还是停止了当下的脚步。

其实我也知道因为固执，这几年亏欠父母的太多了，无论是感情还是生活上，也许同事说的对因为执着容易做错事！

每天像盼星星盼月亮似的在等待，难怪有一句话记忆特深刻：“伤口是可以愈合的，但是等待是没有终点的！”，所以每次都是两手口口，有时候莫名的伤感更会火上浇油！

每次都安慰自己奇迹总会发生的，可是现实中，机会是留给有准备的人的，人家都说好人会有好报，这对我不起作用了，因为我觉得这几年本本分分的同时，心理也渐渐扭曲了。

我常常劝自己，要把事情往两面去想，无非对与错，善与恶，公道自在人心，将心比心看事情，争议难免会造就口舌之争，众口一词终究百口莫辩！舆论就是这么产生的！

记得去年年终的时候还期待2009呢，但是2009就这样结束了，我还该去期待2010吗？

该来的还是要来，该走的还是要走，强扭的瓜不甜，留的住人留不住心！多给人家一个机会，也许每个人都有自己不得已的苦衷吧！