现在的位置: 首页 > 综合 > 正文

js 前绑定 后绑定

2018年01月24日 ⁄ 综合 ⁄ 共 1445字 ⁄ 字号 评论关闭

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

抱歉!评论已关闭.