js 前绑定后绑定

Dear 丶 2021-06-24 14:00 554阅读 0赞

其主要意思就是看我有没有用过前绑定，即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:

代码如下:

//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>