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

<!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 - 20.前台ajax分页

    1.用pager方法,输入参数,会返回一个导航条的html字符串.方法的内部比较简单. ajax-pager.js /** * pageSize, 每页显示数 * pageIndex, 当前页数 * ...

  2. 【转载】有哪些省时小技巧，是每个Linux用户都应该知道的

    http://www.cnblogs.com/amberly/p/4352682.html

  3. html 中几次方，平方米，立方米,下标，上标，删除线等的表示方法

    html 中几次方,平方米,立方米,上标,下标,删除线等的表示方法 上标下标删除线 小号字  M2 54 X24+Y1<3=100 NN <sup>上标</sup> &l ...

  4. MongoDB的介绍和使用场景（1）

    MongoDB 是一个高性能,开源,无模式的文档型数据库,是当前 NoSQL 数据库产品中最热门的一种.它在许多场景下可用于替代传统的关系型数据库或键/值存储方式,MongoDB 使用 C++开发.M ...

  5. 一致性hash算法简介与代码实现

    一.简介: 一致性hash算法提出了在动态变化的Cache环境中,判定哈希算法好坏的四个定义: 1.平衡性(Balance) 2.单调性(Monotonicity) 3.分散性(Spread) 4.负 ...

  6. Instagram的持续部署技术

    Instagram最近发表了一篇关于他们的持续部署(CD)管道的文章,持续部署管道可以让他们更快的将代码推送到生产环境,并且轻松地识别糟糕的提交和始终保持发布可用.在一段时间内以迭代的方式放在一起,其 ...

  7. JavaScript前端框架的思考

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:现在JavaScript前端框架层出不穷,尤其Angular进入到2.x时候之后,我们 ...

  8. Web开发基本准则-55实录-Web访问安全

    Web开发工程师请阅读下面的前端开发准则,这是第一部分,强调了过去几年里我们注意到的Web工程师务须处理的Web访问安全基础点.尤其是一些从传统软件开发转入互联网开发的工程师,请仔细阅读,不要因为忽视 ...

  9. WebView中实现文件下载功能

      WebView控制调用相应的WEB页面进行展示.当碰到页面有下载链接的时候,点击上去是一点反应都没有的.原来是因为WebView默认没有开启文件下载的功能,如果要实现文件下载的功能,需要设置Web ...

  10. 快速破解哈希密文findmyhash

    快速破解哈希密文findmyhash   Kali Linux提供各种哈希密文破解工具,如hashcat.john.rainbows.不论哪一种,实施破解都不太容易.每种方式都需要花费大量的时间.破解 ...