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

<!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. 终于看完<LEARNING SQL>第二版，立此存照

  2. at org.apache.jsp.index_jsp._jspInit(index_jsp.java:22) 报空指针

    原来发布到weblogic 的项目,想改动发布到tomcat上.启动发布一切都正常.出入项目请求路径却包错: java.lang.NullPointerException at org.apache. ...

  3. Tiny Rss Reader - 迷你RSS阅读器

    发布新软件 TinyRss: Windows平台上的一个小巧的Rss阅读器. 用户界面: 项目地址: https://github.com/movsb/tinyrss.git 测试下载: http:/ ...

  4. 算法系列：HMM

    隐马尔可夫(HMM)好讲,简单易懂不好讲. 用最经典的例子,掷骰子.假设我手里有三个不同的骰子.第一个骰子是我们平常见的骰子(称这个骰子为D6),6个面,每个面(1,2,3,4,5,6)出现的概率是1 ...

  5. log4j设置日志格式为UTF-8

    想要log4j输出的日志文件的编码格式为UTF-8.正常情况下只需要添加下述的代码即可: log4j.appender.appender_name.Encoding=UTF-8 但是在spring与l ...

  6. 六款小巧的HTTP Server[C语言]

    1.micro_httpd - really small HTTP server特点: 支持安全的 .. 上级目录过滤 支持通用的MIME类型 支持简单的目录 支持目录列表 支持使用 index.ht ...

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

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

  8. Android使用JNI实现Java与C之间传递数据（转）

    介绍Java如何将数据传递给C和C回调Java的方法.  java传递数据给C,在C代码中进行处理数据,处理完数据后返回给java.C的回调是Java传递数据给C,C需要用到Java中的某个方法,就需 ...

  9. 枚举PEB获取进程模块列表

    枚举进程模块的方法有很多种,常见的有枚举PEB和内存搜索法,今天,先来看看实现起来最简单的枚举PEB实现获取进程模块列表. 首先,惯例是各种繁琐的结构体定义.需要包含 ntifs.h 和 WinDef ...

  10. html table之 全选，全不选

    就是这个小功能让我和组长引发争端,就是这个小功能让我差点"被"辞职,就是这个自封装的js方法让我放下了对组长的敬畏之心,现在分享一下,其实也很简单,但是真的有这么简单吗? < ...