jquery事件委托如何使用

来源：动视网责编：小采时间：2020-11-27 19:33:59

jquery事件委托如何使用

jquery事件委托如何使用:这篇文章主要介绍了关于jquery事件委托如何使用，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下一、总结一句话总结：通过on方法（事件委托），给要绑定事件的元素的祖先绑定事件，从而达到效果。1、事件委托是什么？通过事件冒泡，让子元素

推荐度：

点击下载本文 文档为doc格式

导读jquery事件委托如何使用:这篇文章主要介绍了关于jquery事件委托如何使用，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下一、总结一句话总结：通过on方法（事件委托），给要绑定事件的元素的祖先绑定事件，从而达到效果。1、事件委托是什么？通过事件冒泡，让子元素

这篇文章主要介绍了关于jquery事件委托如何使用，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

一、总结

一句话总结：通过on方法（事件委托），给要绑定事件的元素的祖先绑定事件，从而达到效果。

1、事件委托是什么？

通过事件冒泡，让子元素绑定的事件冒泡到父元素(或祖先元素)上，然后再进行处理。

 91 //使用事件委托，只在table上绑定一次事件 
 92 //可以动态绑定事件 
 93 $('table').on('click','td',function(){ 
 94 //$(this).css('background','orange') 
 95 alert('click_td') 
 96 })

2、事件委托的优势是什么？

给动态元素添加事件
事件只绑定一次，效率高（对于同类大量元素需要绑定，效率非常高，比如一个表格2500td，要给每个td绑定事件）

 91 //使用事件委托，只在table上绑定一次事件 
 92 //可以动态绑定事件 
 93 $('table').on('click','td',function(){ 
 94 //$(this).css('background','orange') 
 95 alert('click_td') 
 96 })

3、事件委托的监听对象是谁（事件委托的对象是谁）？

要执行事件他祖先，比如要给大量td绑定事件，事件委托的对象就是它爷爷，也就是table表

 91 //使用事件委托，只在table上绑定一次事件 
 92 //可以动态绑定事件 
 93 $('table').on('click','td',function(){ 
 94 //$(this).css('background','orange') 
 95 alert('click_td') 
 96 })

4、代码添加的元素和动态添加的元素的区别？

代码生成元素的添加事件的代码要在代码生成之后，这样他是可以绑定事件的

 73 //如果不是动态创建的，可以直接绑定事件 
 74 $('<p></p>').appendTo($('body')) 
 75 $('<p></p>').appendTo($('body')) 
 76 $('<p></p>').appendTo($('body')) 
 77 $('p').on('click',function(){ 
 78 $(this).css('background','orange') 
 79 })

5、事件委托的使用场景是什么？

一个表格里面有很多td，要给td绑定事件，如果使用给每个td绑定事件的方法，效率非常低，并且容易出错，使用事件委托的话就特别方便了，一步到位。

 91 //使用事件委托，只在table上绑定一次事件 
 92 //可以动态绑定事件 
 93 $('table').on('click','td',function(){ 
 94 //$(this).css('background','orange') 
 95 alert('click_td') 
 96 })

6、如何动态给表格添加行列？

html代码+append方法

 87 $('#btn1').click(function(){ 
 88 $('<tr><td></td><td></td><td></td><td></td><td></td></tr>').appendTo('table') 
  })

二、jquery事件委托怎么使用

1、相关知识

事件委托

通过事件冒泡，让子元素绑定的事件冒泡到父元素(或祖先元素)上，然后再进行处理。

2、代码

<!DOCTYPE html>
<html>
<style>
</style>
<head>
 <meta charset="UTF-8">
 <title>演示文档</title>
 <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
 <style type="text/css">
 input{width: 100px;height: 30px;}
 div{width: 50px;height: 50px;border:1px solid green;display: inline-block;margin-left: 15px}
 td{width: 50px;height: 20px;background: #ccc}
 </style>
</style>
</head>
<body>
<h3>jQuery事件对象</h3>
<input id="btn1" type="button" value="事件绑定"><br>
<div></div>
<table>
 <tr>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 </tr>
 <tr>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 </tr>
 <tr>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 </tr>
 <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>
<script type="text/javascript">
 $(function(){
 /*
 //使用事件委托动态绑定事件
 $('#btn1').on('click',function(){
 $("<div></div>").appendTo($('body'))
 })
 // $('div').on('click',function(){
 // $(this).css('background','orange')
 // })
 $(document).on('click','div',function(){
 $(this).css('background','orange')
 })
 //移出事件委托
 $(document).off('click','div')
 
 //如果不是动态创建的，可以直接绑定事件
 $('<div></div>').appendTo($('body'))
 $('<div></div>').appendTo($('body'))
 $('<div></div>').appendTo($('body'))
 $('div').on('click',function(){
 $(this).css('background','orange')
 })
 
 //每一个td绑定一个事件
 //不能动态的添加事件,效率低
 $('td').on('click',function(){
 alert('click_td')
 })
 */ 
 $('#btn1').click(function(){
 $('<tr><td></td><td></td><td></td><td></td><td></td></tr>').appendTo('table')
 })

 //使用事件委托，只在table上绑定一次事件
 //可以动态绑定事件
 $('table').on('click','td',function(){
 //$(this).css('background','orange')
 alert('click_td')
 })

 })
</script>
</body>
</html>

给动态元素添加事件
事件只绑定一次，效率高