事件委托主要是利用事件冒泡现象来实现的，对于事件委托的精准的掌握，可以有利于提高代码的执行效率。先看一段代码实例:

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>脚本之家</title> 

<style type="text/css"> 

table{ 

 width:300px; 

 height:60px; 

 background-color:green; 

}  

table td{ 

 background-color:white; 

} 

</style> 

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){ 

 $("td").bind("click",function(){ 

  $(this).text("哈哈"); 

 }) 

}) 

</script> 

</head> 

<body> 

<table cellspacing="1"> 

 <tr> 

  <td>单元格</td> 

  <td>单元格</td> 

  <td>单元格</td> 

  <td>单元格</td> 

  <td>单元格</td> 

 </tr> 

 <tr> 

  <td>单元格</td> 

  <td>单元格</td> 

  <td>单元格</td> 

  <td>单元格</td> 

  <td>单元格</td> 

 </tr> 

</table> 

</body> 

</html>

在以上代码中，使用bind()方法为每一个td绑定了一个click事件处理函数，这样当点击单元格的时候，就会重新设置单元格中的文本。虽然此中方式实现了需要的效果，看起来非常的完美，其实并非这样，如果当单元格非常多时候，遍历单元格和为每一个单元格绑定事件处理函数将会大大降低代码的性能，如果让单元格的父元素监听事件，只要判断最初触发事件的DOM元素是否是td即可。

代码修改如下:

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>脚本之家</title> 

<style type="text/css"> 

table{ 

 width:300px; 

 height:60px; 

 background-color:green; 

}  

table td{ 

 background-color:white; 

} 

</style> 

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){ 

 $("table").bind("click",function(e){ 

  var target = e.target; 

  $target=$(target); 

  if ($target.is("td")){ 

   $target.text('哈哈'); 

  } 

 }) 

}) 

</script> 

</head> 

<body> 

<table cellspacing="1"> 

 <tr> 

  <td>单元格</td> 

  <td>单元格</td> 

  <td>单元格</td> 

  <td>单元格</td> 

  <td>单元格</td> 

 </tr> 

 <tr> 

  <td>单元格</td> 

  <td>单元格</td> 

  <td>单元格</td> 

  <td>单元格</td> 

  <td>单元格</td> 

 </tr> 

</table> 

</body> 

</html>

以上代码实现了相同的功能，但是效率却大大提高了。

总结:所谓的事件委托，就是事件目标自身不处理事件，而是把处理任务委托给其父元素或者祖先元素，甚至根元素。

jQuery的事件委托实例分析的更多相关文章

  1. JS与Jquery的事件委托——解决了绑定相同事件的问题

    概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完 ...

  2. JS与Jquery的事件委托

    参考:http://www.ituring.com.cn/article/467 概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委 ...

  3. PHP实现事件机制实例分析

    PHP实现事件机制实例分析 内置了事件机制的语言不多,php也没有提供这种功能.事件(Event)说简单了就是一个Observer模式.实现起来非常easy.可是有所不同的是,事件的监听者谁都能够加, ...

  4. JS与Jquery的事件委托机制

    传送:http://www.ituring.com.cn/article/467 概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委 ...

  5. jQuery代码优化 事件委托篇

    <转自 http://www.jb51.net/article/28770.htm> 参考文章:  解密jQuery事件核心 - 绑定设计(一) 参考文章:  解密jQuery事件核心 - ...

  6. JQuery的事件委托；jQuery注册事件；jQuery事件解绑

    一.事件 ①事件委托:就是给子元素的父元素或者祖先元素注册一个事件,但是事件的执行者是子元素,委托事件的好处是能够给动态创建出来时元素也加上事件. ②简单事件:就是给自己注册事件自己执行动态创建出来的 ...

  7. ajax数据提交数据的三种方式和jquery的事件委托

    ajax数据提交数据的三种方式 1.只是字符串或数字 $.ajax({ url: 'http//www.baidu.com', type: 'GET/POST', data: {'k1':'v1'}, ...

  8. [C#]委托实例分析(附源码)

    一直都听说C#中的委托与事件非常重要,都没有什么切身的体会,而这次通过做一个WinForm二次开发的项目才真正感觉到了委托与事件的犀利之处. 1.C#中的事件和委托的作用? 事件代表一个组件能够被关注 ...

  9. zepto和jQuery on事件委托在苹果手机上的”坑“

    移动端用zepto做的页面,突然发现on绑定的click事件并没有触发,代码如下: <ul> <li class="a">1111111aaaaaaasss ...

随机推荐

  1. MVC - 11（上）.DTO

    1.重要:javaScriptSerializer 无法识别被序列化的对象里各种属性是否存在  循环依赖 (System,Web.Script.Serialization.JavaScriptSeri ...

  2. Oracle Redo Log

    http://blog.itpub.net/27039319/viewspace-2120623/ 11.2和11.2以下的区别:http://blog.itpub.net/27039319/view ...

  3. Mishka and Interesting sum Codeforces Round #365 (树状数组)

    树状数组,与Turing Tree类似. xr[i]表示从1到i的抑或,树状数组维护从1到i每个数只考虑一次的异或,结果为sum(r) ^ sum(l) ^ xr[r] ^ xr[l] 其中xr[r] ...

  4. gitlab安装部署

    参考文章: https://gitlab.com/gitlab-org/gitlab-recipes/tree/master/install/centos http://www.xsjxmx.com/ ...

  5. SQL常用查询语句及函数

    1.日期匹配_获取时间差 select datediff(dd,getdate(),'12/25/2006')  --计算从今天到12/25/2006还有多少个月 2.不能通过IP连接数据库 在数据库 ...

  6. hdu 4033 2011成都赛区网络赛 余弦定理+二分 **

    二分边长,判断最后内角和是否为2pi,注意l与r的选取,保证能组成三角形 #include<cstdio> #include<iostream> #include<alg ...

  7. 怎样打开64位 Ubuntu 的32位支持功能?

    转自:http://jingyan.baidu.com/article/7082dc1c539c15e40a89bd3e.html 大多数使用基于 Ubuntu/Debian 的发行版的人都更倾向于选 ...

  8. MySQL模糊查询：LIKE模式和REGEXP模式

    MySQL模糊查询提供了两种模式:LIKE模式和REGEXP模式. LIKE模式 LIKE模式是使用的LIKE 或 NOT LIKE 比较运算符进行模糊查询. SELECT 字段 FROM 表 WHE ...

  9. HDU 5918 Sequence I KMP

    Sequence I Problem Description   Mr. Frog has two sequences a1,a2,⋯,an and b1,b2,⋯,bm and a number p ...

  10. Hbase系统架构

    HBase 系统架构 HBase是Apache Hadoop的数据库,能够对大型数据提供随机.实时的读写访问.HBase的目标是存储并处理大型的数据.HBase是一个开源的,分布式的,多版本的,面向列 ...