suchen

Heim >Web-Frontend >js-Tutorial >Zusammenfassung der Bindungsereignismethoden von bind() und on() in Jquery

Zusammenfassung der Bindungsereignismethoden von bind() und on() in Jquery

高洛峰
高洛峰Original
2016-12-08 16:46:231037Durchsuche

一.bind()

Verwendung: $(selector).bind(event,data,function)

event: erforderlich; ein oder mehrere dem Element hinzugefügte Ereignisse, z click, dblclick usw.;

Einzelereignisverarbeitung: wie $(selector).bind("click",data,function);

Mehrfachereignisverarbeitung: 1. Verwenden Sie Leerzeichen, um Trennen Sie mehrere Ereignisse, z. B. $(selector).bind("click dbclick mouseout",data,function);

2. Verwenden Sie geschweifte Klammern, um flexibel mehrere Ereignisse zu definieren, z. B. $(selector).bind( {event1:function, event2:function, ...})

3. Die Bindung ist relativ starr und kann Funktionen nicht separat an Ereignisse binden. Sie eignet sich für die Verarbeitung mehrerer Ereignisse, die dieselbe Funktion aufrufen.

Klammern-Alternative: Die Bindung ist flexibler und Funktionen können separat an Ereignisse gebunden werden.

Daten: optional; wenn das Bindungsereignis auftritt, müssen Funktionen ausgeführt werden;

Beispiel: 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jquery中bind()绑定事件方式</title>
  <style type="text/css">
    .container
    {
      width: 300px;
      height: 300px;
      border: 1px #ccc solid;
      background-color: Green;
    }
    .btn-test
    {
      border: 1px #ccc solid;
      padding: 5px 15px;
      cursor: pointer;
    }
  </style>
  <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
 
      /*********添加单个事件处理*********/
 
      $(".btn-test").bind("click", function () {
        //显示隐藏div
        $(".container").slideToggle();
      });
 
      /********添加多个事件处理********/
 
      //空格相隔方式
      $(".btn-test").bind("mouseout click", function () {
        //显示隐藏div
        $(".container").slideToggle();
      });
 
      //大括号替代方式
      $(".btn-test").bind({
        "mouseout": function () {
          alert("这是mouseout事件!");
        },
        "click": function () {
          $(".container").slideToggle();
        }
      });
 
      /********删除事件处理********/
      $(".btn-test").unbind("click");
 
    });
  </script>
</head>
<body>
  <input type="button" value="按钮" class="btn-test" />
  <div class="container">
  </div>
</body>
</html>

gilt für alle Versionen, aber entsprechend Zur offiziellen Website, seit Version jquery1.7 Es wird empfohlen, stattdessen on() für die Funktion bind() zu verwenden.

2.ON():

Kurze Beschreibung

on() fügt dem angegebenen Element einen oder mehrere Ereignishandler hinzu und gibt an, wann diese Ereignisse ausgeführt werden sollen. Ereignishandler, die die on()-Methode verwenden, gelten für aktuelle oder zukünftige Elemente (z. B. neue Elemente, die von einem Skript erstellt wurden).

Verwendung

$(selector).on(event,childselector,data,function)

event: ein oder mehrere dem Element hinzugefügte Ereignisse, z. B. click, dblclick usw.;

Einzelereignisverarbeitung: wie $(selector).on("click",childselector,data,function);

Mehrfachereignisverarbeitung:

1. Verwenden Sie Leerzeichen, um mehrere Ereignisse zu trennen, z. B. $(selector).on("click dbclick mouseout",childseletor,data,function);

2. wie zum Beispiel $(selector ).on({event1:function, event2:function, ...},childselector);

3. Raumtrennungsmethode: Die Bindung ist relativ starr und kann Funktionen nicht einzeln an Ereignisse binden. Es eignet sich für die Verarbeitung mehrerer Ereignisaufrufe derselben Funktion.

Klammeralternative: Die Bindung ist flexibler. Sie können Funktionen separat an das Ereignis binden.

childSelector: optionale Elemente Ereignishandler hinzufügen, im Allgemeinen das untergeordnete Element des Selektors;

Daten: optional; die Funktion, die übergeben werden muss; ausgeführt werden; 

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <title>jquery中on()绑定事件方式</title>
   <style type="text/css">
     .container
     {
       width: 300px;
       height: 300px;
       border: 1px #ccc solid;
       background-color: Green;
     }
     .btn-test
     {
       border: 1px #ccc solid;
       padding: 5px 15px;
       cursor: pointer;
     }
   </style>
   <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
   <script type="text/javascript">
     $(function () {
  
       /*********添加单个事件处理*********/
  
       $(".header").on("click", ".btn-test", function () {
         //显示隐藏div
         $(".container").slideToggle();
       });
  
       /********添加多个事件处理********/
  
       //空格相隔方式
       $(".header").on("mouseout click", ".btn-test", function () {
         //显示隐藏div
         $(".container").slideToggle();
       });
  
       //大括号替代方式
       $(".header").on({
         "mouseout": function () {
           alert("这是mouseout事件!");
         },
         "click": function () {
           $(".container").slideToggle();
         }
       }, ".btn-test");
  
       //删除事件
       $(".header").off("click", ".btn-test");
  
     });
   </script>
 </head>
 <body>
   <div class="header">
     <input type="button" value="按钮" class="btn-test" />
   </div>
   <div class="container">
   </div>
 </body>
 </html>

Gilt für die Jquery-Version

jquery1.7 und höher; nach dem Erscheinen der jquery1.7-Version wird es verwendet zum Ersetzen von bind(), live()-Bindungsereignismethode:

Beide unterstützen die Bindung einzelner Elemente und die Methode zum Ersetzen von Klammern 🎜>

2. Die Ereignis-Bubbling-Methode übergibt das Ereignis an das Dokument zur Ereignisantwort.

Vergleich und Verbindung:

1 Ereignisse für vorhandene Elemente; Live(), On() und Delegate() unterstützen jedoch alle Ereigniseinstellungen für neu hinzugefügte Elemente in der Zukunft. Der Democode lautet wie folgt:

2 .bind()-Funktion vor der jquery1.7-Version Es wird dringend empfohlen, bind() zu verwenden, was ebenfalls eine neu hinzugefügte Funktion in Version 1.7 ist . Ebenso kann

verwendet werden, um die Funktion live() zu ersetzen.

3 ()-Funktion, aber die live()-Funktion ist hinsichtlich der Ausführungsgeschwindigkeit, der Flexibilität und der CSS-Selektorunterstützung schlechter. Wenn Sie die spezifische Situation erfahren möchten, klicken Sie bitte hier:

4.bind() unterstützt alle Versionen von Jquery; live() unterstützt jquery1.4.2+; unterstützt jquery1.7+; Da es sich bei dem Projekt um eine niedrigere Version handelt, wird empfohlen, für höhere Versionen von jquery stattdessen on() zu verwenden. Wenn Sie andere Ideen haben, können Sie diese gerne mitteilen.

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：jquery verzögerte das Parsen von ObjektenNächster Artikel：jquery verzögerte das Parsen von Objekten

In Verbindung stehende Artikel

Mehr sehen