sailinglee

浏览: 313423 次
性别:
来自: 上海

最近访客更多访客>>

zq_0752

1040087877

HUAGE1969

leimingchao

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Event delegation in JavaScript

博客分类：

HTML & JS & DOM & CSS

JavaScript IE Web performance jQuery

Event delegation in JavaScript

Posted at June 30, 2009 09:00 am by Nicholas C. Zakas

Tags: Delegation , DOM , Events , JavaScript , Performance

Last week, I spoke at and attended the Velocity web performance conference in San Jose. It was a lot of fun and I learned a lot in the other sessions I sat in on. During one session, Steve Souders announced to everyone that I had covered event delegation in my chapter from his new book, Even Faster Web Sites . Unfortunately, Steve misspoke as that topic isn’t covered, so I’m going to fill in the gap with this post.

Traditional event handling

Event delegation is, quite simply, using a single event handler to manage a particular type of event for the entire page. This isn’t a new idea, but it is an important one to grasp for performance. Most of the time, you’ll see code like this in web applications:

document.getElementById("help-btn").onclick = function(event){
    openHelp();
};

document.getElementById("save-btn").onclick = function(event){
    saveDocument();
};

document.getElementById("undo-btn").onclick = function(event){
    undoChanges();
};

This traditional way of coding assigns an event handler to each element that is actionable. For web sites with only a small amount of interaction, this may be okay. Large web applications, however, can grind to a halt when there are too many event handlers. The problem here isn’t necessarily a speed issue but rather a memory issue. If there are hundreds of possible interactions, there will end up being hundreds of ties between DOM elements and your JavaScript code. The more memory required of your web application, the slower it will run in general. Event delegation helps by minimizing this issue.

Event bubbling and capturing

Event delegation would be possible if not for the flowing nature of events. Early on in web development, browser vendors had to answer a philosophical question: when you click an area on a web page, what element are you actually interacting with? The problem came with the definition of interaction. Clicking within the bounds of an element is somewhat ambiguous. After all, a click on any element is also within the bounds of other elements. Consider clicking on a button. You’re actually clicking within the bounds of the button element, within the bounds of the <body> element, and within the bounds of the <html> element (see figure below).

At the time of this problem, there were two dominant browsers: Netscape Navigator and Internet Explorer. Each decided to solve this problem in a different way. Netscape defined an approach called event capturing, where events first occur on the highest object in the DOM tree (document) and then work down to the deepest element affected by the event. So in this example, event capturing has the click event first handled by document , then the <html> element, then <body> , and finally the <button> element.

Internet Explorer approached the problem in the exact opposite way. The IE team defined an approach called event bubbling. Event bubbling said that the deepest element affected by the event should receive the event first, then its parent should receive the event, and then it’s parent, etc., until the document object finally receives the event. Even though the document doesn’t have a distinct visual representation separate from <html> , it is still deemed to be its parent and thus bubbling continues up the DOM structure. The previous example would then see the <button> element receiving the event first, then <body> , <html> , and finally, document .

When defining the DOM, the W3C apparently found merit in both approaches and so the DOM Level 2 Events specification defines both event capturing and event bubbling as being present. First, the document receives the event, then the capturing phase commences to the most specific element affected by the event. Once the event is handled by that element, it bubbles back up to the document . The DOM addEventListener() method accepts three arguments: the name of the event to handle, a function to execute as the handler, and a Boolean set to true to handle the event during the capturing phase or false to handle during the bubbling phase. Most web developers have always been told to provide false as this argument so that it behaves the same way as attachEvent() in IE. Example:

//bubbling phase handler
document.addEventListener("click", handleClick, false);

//capturing phase handler
document.addEventListener("click", handleClick, true);

Attaching an event handler via a property (element.onclick = function(){} ), automatically assumes you want to use the bubbling phase to handle the event (this is done for backwards compatibility). Pretty much every browser except Internet Explorer (even through version 8.0) supports the DOM Level 2 events specification and therefore supports both capturing and bubbling. Internet Explorer still has its own proprietary event system that supports just bubbling.

Event delegation using bubbling

The key to event delegation is to use the bubbling aspect of events to handle them at the highest level (usually document ). Not all events bubble, but mouse and keyboard events do, and fortunately, those are the ones you’re in which you’re interested. Revisiting the earlier example, you can handle all of the click events by assigning an event handler to the document and then checking the event’s target to determine the course of action.

document.onclick = function(event){
    //IE doesn't pass in the event object
    event = event || window.event;
    
    //IE uses srcElement as the target
    var target = event.target || event.srcElement;    

    switch(target.id){
        case "help-btn":
            openHelp();
            break;
        case "save-btn":
            saveDocument();
            break;
        case "undo-btn":
            undoChanges();
            break;
        //others?
    }
};

Using event delegation, the number of functions necessary to manage events has been cut back to one. All click events are now handled by a single function which then delegates to the appropriate function depending on the target of the event. The same can be down for mousedown , mouseup , mousemove , mouseover , mouseout , dblclick , keyup , keydown , and keypress . A word of caution, though, mouseover and mouseout are difficult to handle via event delegation due to their nature (the mouse is considered “out” when it moves from a container to its child).

Note: You can also accomplish event delegation via event capturing, but it only works in browsers that support capturing and therefore not in Internet Explorer.

Benefits

Event delegation has several benefits to the performance of a web application:

Fewer functions to manage.
Takes up less memory.
Fewer ties between your code and the DOM.
Don’t need to worry about removing event handlers when changing the DOM via innerHTML .

Moving from traditional event handling to event delegation has improved the overall performance of large-scale web applications around the world. It’s become so important that JavaScript libraries such as YUI and jQuery have started to bake it into their core interfaces. It really takes very little effort to implement event delegation, but the performance gains can be quite noticeable through the user interface. This is especially apparent when you move from dozens of event handlers to just one. Give event delegation a try and you may just never do traditional event handling again.

[转自 :http://www.nczonline.net/blog/2009/06/30/event-delegation-in-javascript/ ]

分享到：

我在工作中用到的几个轻量级的js库 | 执行ajax加载页面中的js总结

2011-01-19 17:24
浏览 816
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Event delegation in JavaScript

Event delegation in JavaScript

Traditional event handling

Event bubbling and capturing

Event delegation using bubbling

Benefits

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Event delegation in JavaScript

Event delegation in JavaScript

Traditional event handling

Event bubbling and capturing

Event delegation using bubbling

Benefits

评论

发表评论

相关推荐

循环数组的逻辑怎么写

发布`代码生成器`

MutationObserver

a simple mvvm library - bird

遍历dom tree是一件相当耗时的事情

今天再讲下js里的继承

Text 类型

JavaScript插入动态脚本

innerHTML插入<style>元素

CSS实现相对浏览器窗口定位彻底研究

JavaScript插入动态样式

再理解jQuery；delete原型属性

javascript &&和||

undefined 和 void 0 的区别

Fiddler - 前端开发值得拥有

说说我的web前端之路,分享些前端的好书

JavaScript实现 页面滚动图片加载

JavaScript 操作 Cookie

Javascript定义类（class）的三种方法

服务端解决跨源共享

最近访客更多访客>>

JavaScript实现页面滚动图片加载