jQuery事件委派-简单示例

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery事件委派-简单示例相关的知识，希望对你有一定的参考价值。

Allow events to bubble up the DOM to overseeing handlers.
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3. <head>
  4. 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  5. 	<title>Event Delegation</title>
  6. </head>
  7. <body>
  8.  
  9. 	<script type="text/javascript" src="_assets/behaviour/jquery-1.4.3.min.js"></script>
  10. 	<script type="text/javascript">
  11. 	$(function() {
  12.  
  13. 		//delegate
  14. 		$('table').delegate('tr','click', function() {
  15. 			$(this).toggleClass('selected');
  16. 		});
  17.  
  18. 		//normal bind - slower performance as each tr has to have a bind event 
  19. 		//$('tr').bind('click', function() {
  20. 			//$(this).toggleClass('selected');
  21. 		//});
  22.  
  23. 	});
  24. </script>
  25.  
  26. <style type="text/css">
  27. 	.selected {background:yellow;}
  28. </style>
  29.  
  30. 	<table cellspacing="0">
  31. 		<tbody>
  32. 		  <tr>
  33. 			<td>1</td>
  34. 			<td>Lorem ipsum dolor sit amet</td>
  35. 		  </tr>
  36. 		  <tr>
  37. 			<td>2</td>
  38. 			<td>Lorem ipsum dolor sit amet</td>
  39. 		  </tr>
  40. 		  <tr>
  41. 			<td>3</td>
  42. 			<td>Lorem ipsum dolor sit amet</td>
  43. 		  </tr>
  44. 		  <tr>
  45. 			<td>4</td>
  46. 			<td>Lorem ipsum dolor sit amet</td>
  47. 		  </tr>
  48. 		  <tr>
  49. 			<td>5</td>
  50. 			<td>Lorem ipsum dolor sit amet</td>
  51. 		  </tr>
  52. 		  <tr>
  53. 			<td>6</td>
  54. 			<td>Lorem ipsum dolor sit amet</td>
  55. 		  </tr>
  56. 		</tbody>
  57. 	</table>
  58.  
  59.  
  60. </body>
  61. </html>

以上是关于jQuery事件委派-简单示例的主要内容，如果未能解决你的问题，请参考以下文章

Jquery之事件委派详解

什么是jquery中的事件委派？

jQuery中的事件委派（代理事件）delegate

十条实用的jQuery代码片段

jquery

jquery操作元素