脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-对jQuery的事件绑定的一些思考，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 首先我们看下面的一个很常见的事件绑定代码：
//example
$('#dom').click(function(e){
//do something
});
$('#dom2').click(function(e){
//do something
});
这段代码在事件绑定处理上有一些缺陷：
1.过多的事件绑定会损耗内存
2.后期生成HTML会没有事件绑定，需要重新绑定
3.语法过于繁杂
解决方案
对于1、2两点的解决方案，我们首先先了解一下jQuery的事件绑定
jquery的事件绑定有多个方法可以调用，以click事件来举例：
·click方法
·bind方法
·delegate方法
·on方法
不管你用的是（click / bind / delegate)之中那个方法，最终都是jQuery底层都是调用On方法来完成最终的事件绑定。因此从某种角度来讲除了在书写的方便程度及习惯上挑选，不如直接都采用on方法来的痛快和直接。
关于对方法的详细解释和用例，请直接访问jQuery官网，在这里不一一说明。api.jquery.COM
性能
首先我们需要先对不同的事件绑定方式之间的内存占用差距有一个清晰的认识。
对于性能的分析将采用Chrome的DeveloPEr Tools。
PRofiles --> Take Heap Snapshot，用这个工具我们可以看到Javascript所占用的内存，能够对性能问题进行分析。
DEMO HTML
<html>
<head>
<script type="text/javascript">
$(function(){
$('#BTn-add').click(function(){
$('.ul').prepend('<li><a href="javascript:;">text</a></li>');
});
});
</script>
</head>
<body>
<button id="btn-add">Create Element</button>
<ul class="ul">
<li><a href="javascript:;">text</a></li>
<!-- 2000 line... -->
<li><a href="javascript:;">text</a></li>
</ul>
</body>
</html>
Method 1
$(function(){
$('.ul a').click(function(e){
alert('click event');
});
});
以下是Method 1的内存分析图
内存占用约3.4M
Method 2
$(function(){
$('.ul').on('click', 'a', function(e){
alert('click event');
});
});
以下是Method 2的内存分析图
内存占用约2.0M
结论
1.Method 1 明显比 Method 2 多耗1.4M的内存
2.Method 1 无法将事件绑定到通过点击button所新增DOM中来，而Method 2可以。
只要on的delegate对象是HTML页面原有的元素，由于是事件的触发是通过Javascript的事件冒泡机制来监测，所以对于所有子元素（包括后期通过JS生成的元素）所有的事件监测均能有效，且由于不用对多个元素进行事件绑定（在这个example中为2000+a标签），能够有效的节省内存的损耗。
问题
首先我们看下面的一个很常见的事件绑定代码：
//example
$('#dom').click(function(e){
//do something
});
$('#dom2').click(function(e){
//do something
});
这段代码在事件绑定处理上有一些缺陷：
1.过多的事件绑定会损耗内存
2.后期生成HTML会没有事件绑定，需要重新绑定
3.语法过于繁杂
解决方案
对于1、2两点的解决方案，我们首先先了解一下jQuery的事件绑定
jQuery的事件绑定有多个方法可以调用，以click事件来举例：
·click方法
·bind方法
·delegate方法
·on方法
不管你用的是（click / bind / delegate)之中那个方法，最终都是jQuery底层都是调用on方法来完成最终的事件绑定。因此从某种角度来讲除了在书写的方便程度及习惯上挑选，不如直接都采用on方法来的痛快和直接。
关于对方法的详细解释和用例，请直接访问jQuery官网，在这里不一一说明。api.jquery.com
性能
首先我们需要先对不同的事件绑定方式之间的内存占用差距有一个清晰的认识。
对于性能的分析将采用Chrome的Developer Tools。
Profiles --> Take Heap Snapshot，用这个工具我们可以看到Javascript所占用的内存，能够对性能问题进行分析。
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-对jQuery的事件绑定的一些思考全部内容，希望文章能够帮你解决javascript代码实例教程-对jQuery的事件绑定的一些思考所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。