js 前绑定、后绑定功能实例

内容摘要

这篇文章主要为大家详细介绍了js 前绑定、后绑定功能实例，具有一定的参考价值，可以用来参考一下。

其主要意思就是看我有没有用过前绑定，即Dom树中的某些元素在还没有创建出来

文章正文

这篇文章主要为大家详细介绍了js 前绑定、后绑定功能实例，具有一定的参考价值，可以用来参考一下。

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

<code class="html">
<!--   来自 php教程 （www.idcnote.com）-->
<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" />
<!--   来自 php教程 （www.idcnote.com）--></code>

页面中的js:

<code class="js">
/**
 * 前绑定、后绑定
 *
 * @param 
 * @arrange （www.idcnote.com）
 **/
<script src="/js/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></code>

注：关于js 前绑定、后绑定功能实例的内容就先介绍到这里，更多相关文章的可以留意

代码注释

上一篇 php 生成SQL格式的mysql备份示例下一篇 js 获取IP地址多种方法示例

作者：喵哥笔记

学的不仅是技术，更是梦想！