站长网_站长主页_站长之家_易采站长站

会员投稿 投稿指南 站长资讯通告: jQuery的事件委托实例分析
搜索:
您的位置: 主页 > 教程 > 前端设计 > jQuery > » 正文

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>
最新图文资讯
1 2 3 4 5 6
易采站长站 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助 -