jQuery的事件委托实例分析

2019/6/29 22:26:06

编程Tag： 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>
  <td>单元格</td>
  <td>单元格</td>
  <td>单元格</td>
  <td>单元格</td>
 </tr>
</table>
</body>
</html>

以上代码实现了相同的功能，但是效率却大大提高了。

总结:所谓的事件委托，就是事件目标自身不处理事件，而是把处理任务委托给其父元素或者祖先元素，甚至根元素。

以上所述就是本文的全部内容了，希望大家能够喜欢。

这篇关于jQuery的事件委托实例分析的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

jQuery的事件委托实例分析

相关编程文章