js中的前绑定和后绑定

最近，有一些同志经常问起我在开发中事件绑定的问题。其主要意思就是看我有没有用过前绑定，即Dom树中的某些元素在还没有创建出来时，就指定该类型的元素一出生就应该拥有的某些事件。在实际开发过程中经常会涉及到前绑定和后绑定。顾名思义，前绑定——还未出生即绑定了某些事件，后绑定——出生后才会绑定的某些事件。

下面，通过一个简单的例子进行阐述，以供大家参考，并对各个方法进行比较：

页面元素：

<div id="main">        <a href="#">aaaaaaaaaaaaaaaaaaaaaa</a><br />        <a href="#">bbbbbbbbbbbbbbbbbbbb</a><br />        <a href="#">ccccccccccccccccccccccccc</a><br />        <a href="#">dddddddddddddddddddd</a><br />        <a href="#">eeeeeeeeeeeeeeeeeeeeee</a><br />        <a href="#">fffffffffffffffffffffffffffffffff</a><br />        <a href="#">gggggggggggggggggggg</a><br />        <a href="#">hhhhhhhhhhhhhhhhhhhh</a>    </div>    <input type="button" value="创建a标签" id="btnCreate" />

页面中的js:

<script src="201102/Scripts/jquery-1.5.js" type="text/javascript"></script>    <script type="text/javascript">        $(function () {            //后绑定，即动态创建的元素不能拥有绑定的事件！！！            //1.后绑定            //            $("#main > a ").click(function () {            //                alert($(this).html());            //            });            //2.后绑定            //            $("#main  > a").bind("click", function () {            //                alert($(this).text());            //            });            //3.后绑定,            //            $("#main  > a").bind({            //                click: function () { alert($(this).text()); },            //                mouseover: function () { $(this).css("background-color", "red") },            //                mouseout: function () { $(this).css("background-color", "white") }            //            });            $("#btnCreate").bind({                click: function () { $("<br /><a href='#'>我是动态创建的</a>").appendTo("#main"); }            });            //4.前绑定，动态创建的元素也拥有了点击的事件            //            $("#main").delegate("a", "click", function () {            //                alert($(this).text());            //            });            //5.前绑定,live的事件源头的是document\delegate的源头是具体要绑定的元素，所以delegate的效率比live高多了            $("#main a").live("click", function () {                alert($(this).text());            });        });    </script>

更详细的比较：http://www.cnblogs.com/sniper007/archive/2011/11/18/2254260.html