日期:2014-05-16  浏览次数:20253 次

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).te