JQuery 优化

7、事件委托（又名：冒泡事件）

除 非特别说明，每一个JavaScript事件（如click, mouseover 等）在DOM结构树上都会冒泡到它的父元素上。如果我们想让很多elements(nodes)调用同一个function这是非常有用的。取而代之的是 你可以只对它们的父级绑定一次，而且可以计算出是哪一个节点触发了事件，而不是绑定一个事件监听器到很多节点上这种效率低下的方式。例如，假如我们要开发 一个包含很多input的大型form，当input被选择的时候我们想绑定一个class name。像这样的帮定是效率低下的：

$('#myList li).bind('click', function(){

    $(this).addClass('clicked');    // do stuff

});

反而，我们应该在父级侦听click事件。

$('#myList).bind('click', function(e){

    var target = e.target, // e.target grabs the node that triggered the event.

        $target = $(target);  // wraps the node in a jQuery object

    if (target.nodeName === 'LI') {

        $target.addClass('clicked');        // do stuff

    }

});

父节点担当着发报机的工作，可以在触发了事件的目标element上做一些工作。如果你发现自己把一个event listener帮定到很多个element上，那么你这种做法是不正确的。

 

9、遵从$(windows).load

有 一种诱惑会使jQuery开发者hook所有事情到 $(document).ready 这个虚伪的事件里。毕竟在大多数例子里都可以看到这样使用。虽然$(document).ready 非常有用，它在页面呈现时发生，虽然其它对象还在下载中。如果你发现你的页面在下载中停顿，就有可能是$(document).ready 引起的。你可以通过把jQuery functions帮定到$(window).load事件来减少下面下载时的CPU使用率，它是在所有HTML（包括iframe内容）都下载完以后才 去调用所有对象的。

$(window).load(function(){

    // jQuery functions to initialize after the page has loaded.

});

多余的功能，如拖拽、帮定可视化效果和动画、预读取图片等，使用这种方法比较好。

 

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/alex197963/archive/2010/09/09/5873066.aspx