jquery事件委託如何使用
- 不言原創
- 2018-07-09 17:59:061788瀏覽
這篇文章主要介紹了關於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 $('e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3').appendTo($('body'))
75 $('e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3').appendTo($('body'))
76 $('e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3').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 $('a34de1251f0d9fe1e645927f19a896e8b6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edffd273fcf5bcad3dfdad3c41bd81ad3e5').appendTo('table')
89 })
二、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>為動態元素新增事件
事件只綁定一次，效率高
以上就是本文的全部內容，希望對大家的學習有幫助，更多相關內容請關注PHP中文網！
相關推薦：
Node.js使用superagent模擬GET/POST的請求
以上是jquery事件委託如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn