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

<!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. Shell编程基础教程3--Shell输入与输出

    3.Shell输入与输出    3.1.echo        echo命令可以显示文本行或变量,或者把字符串输出到文件        echo [option] string             ...

  2. poj 2236:Wireless Network（并查集，提高题）

    Wireless Network Time Limit: 10000MS   Memory Limit: 65536K Total Submissions: 16065   Accepted: 677 ...

  3. SQL Server 2014 BI新特性（一）五个关键点带你了解Excel下的Data Explorer

    Data Explorer是即将发布的SQL Server 2014里的一个新特性,借助这个特性讲使企业中的自助式的商业智能变得更加的灵活,从而也降低了商业智能的门槛. 此文是在微软商业智能官方博客里 ...

  4. android 入门-工程属性介绍

    工程属性 (1)drawable-hdpi里面存放高分辨率的图片,如WVGA (480x800),FWVGA (480x854) (2)drawable-mdpi里面存放中等分辨率的图片,如HVGA ...

  5. Kmeans聚类算法原理与实现

    Kmeans聚类算法 1 Kmeans聚类算法的基本原理 K-means算法是最为经典的基于划分的聚类方法,是十大经典数据挖掘算法之一.K-means算法的基本思想是:以空间中k个点为中心进行聚类,对 ...

  6. Java Web 项目获取运行时路径 classpath

    假设资源文件放在maven工程的 src/main/resources 资源文件夹下,源码文件放在 src/main/java/下, 那么java文件夹和resources文件夹在运行时就是class ...

  7. 谈谈网站插入youtube视频播放

    最近需要在网页首页追加视频播放功能. 需要播放youtube视频.中间遇到一些波折.特来分享一下. 首先像网页添加视频文件我们通常够采用embed标签. 标签里可以设置很多的关键子.我们可以配置为fl ...

  8. ☆ ☆ VMware9虚拟机安装MAC OS X Mountain Lion 10.8.2详细图文教程 (转)

    参考  http://diybbs.zol.com.cn/1/34037_699.html 然后对安装的Mac系统进行升级到最新版本. 安装mac系统之后,再安装VMTOOLS darwin. 方法可 ...

  9. caffe中添加local层

    下载caffe-local,解压缩; 修改makefile.config:我是将cuudn注释掉,去掉cpu_only的注释; make all make test(其中local_test出错,将文 ...

  10. css3 -- 过渡与动画

    1.注意使用前缀 2.属性: transition-property:none/all/属性 3.持续时间: transition-duration:默认值是0,即使是负值,按照0进行处理 4.tra ...