提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

js中的前绑定和后绑定详解

JS 详解 绑定
2023-06-13 09:15:03 时间

 其主要意思就是看我有没有用过前绑定，即Dom树中的某些元素在还没有创建出来时，就指定该类型的元素一出生就应该拥有的某些事件。在实际开发过程中经常会涉及到前绑定和后绑定。顾名思义，前绑定——还未出生即绑定了某些事件，后绑定——出生后才会绑定的某些事件。
下面，通过一个简单的例子进行阐述，以供大家参考，并对各个方法进行比较：
页面元素：

复制代码代码如下:

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

页面中的js:
复制代码代码如下:

<scriptsrc="201102/Scripts/jquery-1.5.js"type="text/javascript"></script>
<scripttype="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/><ahref="#">我是动态创建的</a>").appendTo("#main");}
});


//4.前绑定，动态创建的元素也拥有了点击的事件
//$("#main").delegate("a","click",function(){
//alert($(this).text());
//});

//5.前绑定,live的事件源头的是documentdelegate的源头是具体要绑定的元素，所以delegate的效率比live高多了
$("#maina").live("click",function(){
alert($(this).text());
});
});
</script>

相关文章