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

<!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. 关于Mesos和Kubernetes的区别

    这个主题应该和服务发现注册一样,进入视野...

  2. forEach 方法 (Array) (JavaScript)

    为数组中的每个元素执行指定操作. 语法 array1.forEach(callbackfn[, thisArg]) 参数 参数 定义 array1 必选.一个数组对象. callbackfn 必选.最 ...

  3. c++ 读取txt文件并输出到控制台

    代码如下: #include "stdafx.h" #include<iostream> #include<fstream> #include<cst ...

  4. CXF学习(3) wsdl文件

    <!--一次webservice调用,其实并不是方法调用,而是发送SOAP消息 ,即xml片段--> <!--以上一篇中的wsdl文档为例,这里我将注释写到文档中 --> &l ...

  5. jq与js 区别

    $(this).html(666); <div id="a">123</div> <script> $("#a").clic ...

  6. [Linux] 解决终端显示乱码问题

    [背景] 公司弄了两台新的虚拟机,用来将原先都部署在一台机器上的JIRA, Fisheye, Confluence迁移到这两台机器上,使用SecureCRT进行登录,使用相关命令时,一台出现乱码,另外 ...

  7. 使用ASP.NET MVC、Rabbit WeixinSDK和Azure快速开发部署微信后台

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:公众号后台系统和数据都基本准备妥当了,可以来分享下我是如何开发本微信公众号的后台系统了 ...

  8. PowerDesigner(PowerDesigner15.1.0.2850)下载、安装以及破解

    转自:http://www.cnblogs.com/Fonkie/articles/1600662.html 一.先安装PowerDesigner15(PowerDesigner15.1.0.2850 ...

  9. eclipse项目中关于导入的项目里提示HttpServletRequest 不能引用的解决办法

    eclipse项目中关于导入的项目里提示HttpServletRequest 不能引用的解决办法 当使用eclipse导入外部的web工程时,有时会提示HttpServletRequest, Serv ...

  10. C语言判断文件是否存在（转）

    int   access(const   char   *filename,   int   amode); amode参数为0时表示检查文件的存在性,如果文件存在,返回0,不存在,返回-1. 这个函 ...