jQuery的事件委托实例分析
事件委托主要是利用事件冒泡现象来实现的，对于事件委托的精准的掌握，可以有利于提高代码的执行效率。先看一段代码实例:
<!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事件绑定和委托实例，包括了jQuery事件绑定和委托实例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery事件绑定和委托。分享给大家供大家参考。具体方法如下： jQuery事件的绑定和委托可以用多种方法实现，on() 、 bind() 、 live() 、 delegate() ，还有one()。 有时我们可能会像下面这样绑定一个事件： 上面的
-
本文向大家介绍JQuery事件委托原理与用法实例分析，包括了JQuery事件委托原理与用法实例分析的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JQuery事件委托原理与用法。分享给大家供大家参考，具体如下： 事件委托就是利用事件冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作。事件委托首先可以极大的减少事件绑定次数，其次也可以让新加入的子集元素也拥有相同的操作。 一
-
本文向大家介绍JavaScript事件委托技术实例分析，包括了JavaScript事件委托技术实例分析的使用技巧和注意事项，需要的朋友参考一下 本文实例分析了JavaScript事件委托技术。分享给大家供大家参考。具体分析如下： 如果一个整体页面里有大量的按钮.我们就要为每一个按钮绑定事件处理程序.这样就会影响性能了. 首先每个函数都是对象,对象就会占用很多内存.内存中的对象越多,性能就越差. 其
-
本文向大家介绍JavaScript的事件代理和委托实例分析，包括了JavaScript的事件代理和委托实例分析的使用技巧和注意事项，需要的朋友参考一下 在JavaScript中，经常会碰到要监听列表中多项li的情形，假设我们有一个列表如下： 如果我们要实现以下功能：当鼠标点击某一li时，alert输出该li的内容，我们通常的写法是这样的： 当列表项比较少时，直接给每个li添加onclick事件 列
-
本文向大家介绍jQuery事件委托之Safari，包括了jQuery事件委托之Safari的使用技巧和注意事项，需要的朋友参考一下 什么是事件委托 事件委托是Jquery中一种事件绑定的方式，不同于常见的事件绑定方式将事件绑定在目标元素上，而是将事件绑定在父级元素上通过事件冒泡来执行绑定函数。 事件委托的原理 事件委托将事件监听绑定在目标元素的父级上，当目标元素响应事件时冒泡到绑定事件的父级上，进
-
实现on,off的事件委托! 我们能根据之前的思路,利用同样的方法实现一个事件委托. 先来看看流程图 然后先看看结果是如何，毕竟流程图看的也不一定能懂。 最后我们再来看看代码 Kodo.deleEvents = []; //事件委托存放的事件 Kodo.deleId = 0; //事件委托的唯一标识 on: function(type, selector, fn) { if (typeo