对jQuery的事件绑定的一些思考
jQuery的事件绑定
问题
首先我们看下面的一个非经常见的事件绑定代码：
//example
$('#dom').click(function(e){
//do something
});
$('#dom2').click(function(e){
//do something
});这段代码在事件绑定处理上有一些缺陷：
过多的事件绑定会损耗内存
后期生成HTML会没有事件绑定。须要又一次绑定
语法过于繁杂
解决方式
对于1、2两点的解决方式，我们首先先了解一下jQuery的事件绑定
jQuery的事件绑定有多个方法能够调用。以click事件来举例：
click方法
bind方法
delegate方法
on方法
无论你用的是（click / bind / delegate)之中那个方法，终于都是jQuery底层都是调用on方法来完毕终于的事件绑定。
因此从某种角度来讲除了在书写的方便程度及习惯上挑选。不如直接都採用on方法来的痛快和直接。
关于对方法的详解和用例。请直接訪问jQuery官网。在这里不一一说明。
性能
首先我们须要先对不同的事件绑定方式之间的内存占用差距有一个清晰的认识。
对于性能的分析将採用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
结论
Method 1 明显比 Method 2 多耗1.4M的内存
Method 1 无法将事件绑定到通过点击button所新增DOM中来。而Method 2能够。
仅仅要on的delegate对象是HTML页面原有的元素。因为是事件的触发是通过Javascript的事件冒泡机制来监測，所以对于全部子元素（包含后期通过JS生成的元素）全部的事件监測均能有效。且因为不用对多个元素进行事件绑定（在这个example中为2000+a标签），能够有效的节省内存的损耗。
思考
代码如诗。但非常easy变成代码如屎。怎样提高代码的优雅程度也是一个非常有意思的事情。
下面是一个非常普通且普遍的JS文件的代码片段（用于一般站点）
$('#btn-add').click(function(){
//do something
});
$('.action-box #btn-delete').click(function(){
//do something
});
$('.action-box #btn-sort').mouseenter(function(){
//do something
});毫不夸张的说，当一个js文件上百行后，相似于上面的代码，你非常难从里面发现规律。
可能A喜欢写#btn-add。而B喜欢写.action-box #btn-add来作为选择符。
堆砌着很多不同类型事件。没有一个次序可言
没有运用到我们刚刚所讲的利用事件冒泡来做事件绑定
改进
我们来一步步改进一下之前的JS代码
Version 1
$('.action-box').on('click', '#btn-add', function(){
//do something
});
$('.action-box').on('click', '#btn-delete', function(){
//do something
});尽管运用了事件冒泡。只是感觉还是有点累赘。.action-box出现多次。感觉不舒服，让我们继续改进
Version 2
$('.action-box').on('click', '#btn-add， #btn-delete', function(){
if($(this).attr('id') == 'btn-add'){
//do something
} else{
//do something
}
});感觉比刚刚好多了，只是还是须要推断元素来做出对应的处理。能接受。但不完美。
灵感
首先看一下css的增强版本号sass对于css语法上面的改进
/*bed css code*/
.action-box { width: 100%; color: #000; }
#btn-add { color: blue; }
#btn-delete { color: red; }
/*good css code*/
.action-box { width: 100%; color: #000; }
.action-box #btn-add { color: blue; }
.action-box #btn-delete { color: red; }
/*sass code*/
.action-box {
width: 100%;
color: #000;
#btn-add {
color: blue;
}
#btn-delete {
color: red;
}
}复制代码
我们能够在 good css code 和 sass code 从中能够能够非常清晰了然的看到文档结构：.action-box 下面有两个button。
这能否让sass这样的代码结构运用到js中来呢？答案当然是能够。
$('.action-box').coffee({
click: {
'#btn-add': function(){
//do something
},
//这是是支持jQuery的':last / [attr] / :eq(0)'等方法的
'#btn-delete': function(){
//do something
}
},
mouseenter: {
'#btn-sort': function(){
//do something
}
}
});喜欢这样的结构吗？
清晰明了的文档结构
运用事件冒泡，有效降低内存的占用
第一级别用事件名称来划分
第二级别的属性名相当于选择符。
coffee函数的源代码
$.fn.coffee = function(obj){
for(var eName in obj)
for(var selector in obj[eName])
$(this).on(eName, selector, obj[eName][selector]);
}聊聊数行代码。就能够做成一个非常美妙的语法糖
Enjoy yourself ! ^_^
假设你认为这篇文章还不错，请帮忙点击一下推荐，谢谢！
对jQuery的事件绑定的一些思考的更多相关文章
- [HTML5]原生事件绑定和jquery动态事件绑定的区别
原生事件绑定: <!-- 标签上绑定的事件是由window对象帮助调用,因此方法内的this其实是window对象 --> <label><input type=&quo ...
- jquery 动态事件绑定(0512)
jquery动态事件绑定,父元素需为静态元素,(不能是动态生成): $("#parent").on("click","#child",fun ...
- python 全栈开发，Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))
一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...
- jQuery的事件绑定与触发 - 学习笔记
jQuery的事件绑定与触发 事件绑定 自动触发事件 常用的鼠标事件 事件冒泡和默认行为 事件冒泡 默认行为 获得当前鼠标的位置和按键 jQuery的事件绑定与触发 事件绑定 基本绑定 $(eleme ...
- 7 HTML&JS等前端知识系列之jquery的事件绑定
preface 我们知道,每一个a,input等等标签都可以为其绑定一个事件,onclick也好,focus 也罢,都可以绑定的.但是众神key想过这个问题没有,倘若这里有1000个input标签需要 ...
- jQuery中事件绑定到bind、live、delegate、on方法的探究
1. 给页面上的某个元素绑定事件,最初采用下面的方式实现: $(‘selector’).click(function(){ //code }); 缺点: 不能同时绑定多个事件,不能绑定动态的元素. 后 ...
- jQuery的事件绑定命名空间
jQuery的bind的函数在实际应用中用的不是特别多,只是他可以绑定一个事件,但不会即时触发,也可以通过unbind来解除绑定.在没有看到这篇文章之前,我一直不知道原来bind也可以有命名空间.事实 ...
- 前端 -----jQuery的事件绑定和解绑
11-jQuery的事件绑定和解绑 1.绑定事件 语法: bind(type,data,fn) 描述:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数. 参数解释: type (S ...
- day 55 jQuery 之事件 绑定等
属性选择器: [attribute] [attribute=value]// 属性等于 列入 $("input[value='male']").prop('chekced') 注意 ...
随机推荐
- oracle造成系统CPU过高的检查sql
1. 根据占用CPU高的进程号来查询这个进程执行的SQL语句: CPU过高的进程号: #首先找到CPU过高的进程号 # top -bn1 是静态找到占用最高的进程 [root@localhost ~] ...
- JavaScript变量命名规则：匈牙利命名法
匈牙利命名法语法 变量名＝类型+对象描述 类型指变量的类型 对象描述指对象名字全称或名字的一部分,要求有明确含义,命名要容易记忆容易理解. 提示 虽然JavaScript变量表面上没有类型,但是Jav ...
- js实现静态页面跳转传参
最近有个项目: 存静态web服务,一个新闻页面列表出所有新闻摘要信息,然后通过点击新闻详情访问到该新闻的详情页面: 新闻展示的页面通过ajax请求接口获取到新闻的摘要信息,预计想通过id的方式访问到新 ...
- 三十分钟理解博弈论“纳什均衡” -- Nash Equilibrium
欢迎转载,转载请注明:本文出自Bin的专栏blog.csdn.net/xbinworld. 技术交流QQ群:433250724,欢迎对算法.技术感兴趣的同学加入. 纳什均衡(或者纳什平衡),Nash ...
- 高屋建瓴之WebMail攻与防
0x01:前言 随着互联网的快速发展,我们的生活与互联网的联系愈加的紧密.各种快捷方便的信息化通信工具渐渐取代了传统的通信方式.微博.QQ.MSN.微信.陌陌, …这样的社交软件和平台已经成为了我们生 ...
- HBase 入门笔记-安装篇
一.前言 接触HBase已近半年,从一无所知到问题的解决,在数据落地方面也有了一定的了解,在此记录这半年来碰到的一些问题和对一些数据落地方面的见解,本篇主要介绍一下hbase安装方面的信息 二.安装环 ...
- Codeforces Round #371 (Div. 1) C - Sonya and Problem Wihtout a Legend
C - Sonya and Problem Wihtout a Legend 思路:感觉没有做过这种套路题完全不会啊.. 把严格单调递增转换成非严格单调递增,所有可能出现的数字就变成了原数组出现过的数 ...
- mvc3 RenderAction传参问题
我在viewA中调用部分视图viewB代码如下:@{Html.RenderAction("NewsList","News",new{pageSize=13, c ...
- 解析kubernetes架构
一. 简介: kubernetes是一个开源的容器管理工具,是基于GO语言开实现的,轻量级和便携式的应用,可以把kubernetes cluster在linux主机上部署.管理和扩容docker容器的 ...
- 1. MNIST读取数据
%pylab inline Populating the interactive namespace from numpy and matplotlib 在Yann LeCun教授的网站中(http: ...