recherche

Maison >interface Web >js tutoriel >Comment utiliser la délégation d'événements jquery

Comment utiliser la délégation d'événements jquery

不言
不言original
2018-07-09 17:59:061839parcourir

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

Résumé

Un. Résumé de la phrase : via la méthode on (délégation d'événement), liez l'événement à l'ancêtre de l'élément auquel l'événement est lié pour obtenir l'effet.

1. Qu'est-ce que la délégation événementielle ?

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       })

2. Quels sont les avantages de la délégation événementielle ?

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       })

3. Qui est l'objet d'écoute de la délégation d'événement (qui est l'objet de la délégation d'événement) ?

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       })

4. et dynamiques ajoutées par le code Quelle est la différence entre les éléments ajoutés ?

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        })

5 Quels sont les scénarios d'utilisation de la délégation d'événements ?

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       })

6. Comment ajouter dynamiquement des lignes et des colonnes à un tableau ?

Code HTML + méthode d'ajout

 87       $('#btn1').click(function(){ 
 88           $('a34de1251f0d9fe1e645927f19a896e8b6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edfb6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edffd273fcf5bcad3dfdad3c41bd81ad3e5').appendTo('table') 
 89       })

2. Comment utiliser la délégation d'événements jquery

1. 🎜 >Grâce au bouillonnement d'événements, laissez l'événement lié par l'élément enfant remonter jusqu'à l'élément parent (ou élément ancêtre), puis traitez-le.

2. Code

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

<!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(){
        /*
    //使用事件委托动态绑定事件
      $(&#39;#btn1&#39;).on(&#39;click&#39;,function(){
         $("<div></div>").appendTo($(&#39;body&#39;))
      })
      // $(&#39;div&#39;).on(&#39;click&#39;,function(){
      //     $(this).css(&#39;background&#39;,&#39;orange&#39;)
      // })
      $(document).on(&#39;click&#39;,&#39;div&#39;,function(){
          $(this).css(&#39;background&#39;,&#39;orange&#39;)
      })
      //移出事件委托
      $(document).off(&#39;click&#39;,&#39;div&#39;)
      
      //如果不是动态创建的，可以直接绑定事件
      $(&#39;<div></div>&#39;).appendTo($(&#39;body&#39;))
      $(&#39;<div></div>&#39;).appendTo($(&#39;body&#39;))
      $(&#39;<div></div>&#39;).appendTo($(&#39;body&#39;))
      $(&#39;div&#39;).on(&#39;click&#39;,function(){
            $(this).css(&#39;background&#39;,&#39;orange&#39;)
       })
      
      //每一个td绑定一个事件
      //不能动态的添加事件,效率低
      $(&#39;td&#39;).on(&#39;click&#39;,function(){
          alert(&#39;click_td&#39;)
      })
      */ 
      $(&#39;#btn1&#39;).click(function(){
          $(&#39;<tr><td></td><td></td><td></td><td></td><td></td></tr>&#39;).appendTo(&#39;table&#39;)
      })

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

    })
</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 :

js déplace n'importe quel élément vers une position spécifiée

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：webpack importe du CSS et divers chargeursArticle suivant：webpack importe du CSS et divers chargeurs

Articles Liés

Voir plus