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的事件源头的是documentdelegate的源头是具体要绑定的元素,所以delegate的效率比live高多了

  $("#main a").live("click", function () {

  alert($(this).text());

  });

  });

  </script>