Heim > Artikel > Web-Frontend > So verwenden Sie die JQuery-Ereignisdelegierung

So verwenden Sie die JQuery-Ereignisdelegierung

不言Original: 2018-07-09 17:59:061788Durchsuche

Dieser Artikel stellt hauptsächlich die Verwendung der JQuery-Ereignisdelegation vor. Er hat einen gewissen Referenzwert. Jetzt kann ich ihn mit allen teilen, die ihn benötigen.

Eins Satz Zusammenfassung: Binden Sie das Ereignis über die on-Methode (Ereignisdelegation) an den Vorfahren des Elements, an das das Ereignis gebunden ist, um den Effekt zu erzielen.

1. Was ist Eventdelegation?

Verwenden Sie die Ereignis-Bubbling-Funktion, um an untergeordnete Elemente gebundene Ereignisse zu übergeordneten Elementen (oder Vorfahrenelementen) zu sprudeln und diese dann zu verarbeiten.

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

2. Was sind die Vorteile der Eventdelegation?

Ereignisse zu dynamischen Elementen hinzufügen

Ereignisse werden nur einmal gebunden, was sehr effizient ist (bei einer großen Anzahl von Elementen desselben Typs, die gebunden werden müssen, ist die Effizienz sehr hoch, wie z Tabelle von 2500td, und Ereignisse müssen an jedes td gebunden sein)

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

3. Wer ist das Abhörobjekt der Ereignisdelegation (wer ist das Objekt der Ereignisdelegation)?

Um ein Ereignis auszuführen, beispielsweise um Ereignisse an eine große Anzahl von TDs zu binden, ist das Objekt der Ereignisdelegierung sein Vorfahre, also die Tabelle

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

4 per Code und dynamisch hinzugefügt Was ist der Unterschied zwischen Elementen?

Der Code zum Hinzufügen von Ereignissen zum Codegenerierungselement muss nach der Codegenerierung erfolgen, damit er Ereignisse binden kann

 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 Welche Verwendungsszenarien gibt es für die Ereignisdelegierung?

Es gibt viele TDs in einer Tabelle. Wenn Sie die Methode zum Binden von Ereignissen an jedes TD verwenden, ist die Verwendung von Ereignissen sehr ineffizient und fehleranfällig Delegation. Ein Schritt an Ort und Stelle.

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

6. Wie füge ich einer Tabelle dynamisch Zeilen und Spalten hinzu?

HTML-Code + Append-Methode

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

2. So verwenden Sie die JQuery-Ereignisdelegierung

Verwandte Kenntnisse

Durch das Bubbling übergebener Ereignisse können Ereignisse, die an untergeordnete Elemente gebunden sind, zu übergeordneten Elementen (oder Vorgängerelementen) übertragen und dann verarbeitet werden.

2. Code

<!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>

Ereignisse zu dynamischen Elementen hinzufügen

Ereignisse werden nur einmal gebunden, hohe Effizienz

Das Obige ist hoffentlich der gesamte Inhalt dieses Artikels Es wird für alle nützlich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

js verschiebt jedes Element an eine angegebene Position

Node.js verwendet Superagent, um GET/ zu simulieren POST-Anfrage

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die JQuery-Ereignisdelegierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Webpack importiert CSS und verschiedene LoaderNächster Artikel：Webpack importiert CSS und verschiedene Loader

In Verbindung stehende Artikel

Mehr sehen