Zusammenfassung der Bindungsereignismethoden von bind() und on() in Jquery-js-Tutorial-php.cn

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

高洛峰

Freigeben： 2016-12-08 16:46:23

Original

1022 Leute haben es durchsucht

一.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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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.