Maison > Article > interface Web > Comment utiliser la délégation d'événements jquery
Cet article présente principalement comment utiliser la délégation d'événements jquery. Il a une certaine valeur de référence. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer
Utilisez le bouillonnement d'événements pour permettre aux événements liés aux éléments enfants de remonter aux éléments parents (ou aux éléments ancêtres), puis de les traiter.
91 //使用事件委托,只在table上绑定一次事件 92 //可以动态绑定事件 93 $('table').on('click','td',function(){ 94 //$(this).css('background','orange') 95 alert('click_td') 96 })
Ajouter des événements aux éléments dynamiques
Les événements ne sont liés qu'une seule fois, ce qui est très efficace (pour un grand nombre d'éléments du même type qui doivent être liés, l'efficacité est très élevée, comme un table de 2500td, et les événements doivent être liés à chaque td)
91 //使用事件委托,只在table上绑定一次事件 92 //可以动态绑定事件 93 $('table').on('click','td',function(){ 94 //$(this).css('background','orange') 95 alert('click_td') 96 })
Pour exécuter un événement, par exemple pour lier des événements à un grand nombre de TD, l'objet de la délégation d'événement est son ancêtre, qui est la table
91 //使用事件委托,只在table上绑定一次事件 92 //可以动态绑定事件 93 $('table').on('click','td',function(){ 94 //$(this).css('background','orange') 95 alert('click_td') 96 })
Le code pour ajouter des événements à l'élément de génération de code doit être après la génération du code, afin qu'il puisse lier des événements
73 //如果不是动态创建的,可以直接绑定事件 74 $('e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3').appendTo($('body')) 75 $('e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3').appendTo($('body')) 76 $('e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3').appendTo($('body')) 77 $('p').on('click',function(){ 78 $(this).css('background','orange') 79 })
Il y a de nombreux TD dans une table. Vous devez lier les événements aux TD. Si vous utilisez la méthode de liaison des événements à chaque TD, elle est très inefficace et sujette aux erreurs. délégation. Une étape en place.
91 //使用事件委托,只在table上绑定一次事件 92 //可以动态绑定事件 93 $('table').on('click','td',function(){ 94 //$(this).css('background','orange') 95 alert('click_td') 96 })
Code HTML + méthode d'ajout
87 $('#btn1').click(function(){ 88 $('a34de1251f0d9fe1e645927f19a896e8b6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edffd273fcf5bcad3dfdad3c41bd81ad3e5').appendTo('table') 89 })
<!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>Ce qui précède représente l'intégralité du contenu de ce document. Article, j'espère qu'il sera utile à tout le monde. Apprendre est utile. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !
Recommandations associées :
Node.js utilise un superagent pour simuler GET/ Demande POST
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!