Home >Web Front-end >JS Tutorial >Summary of binding event methods of bind() and on() in Jquery

Summary of binding event methods of bind() and on() in Jquery

高洛峰Original: 2016-12-08 16:46:231040browse

一.bind()

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

event: required; one or more events added to the element, such as click, dblclick, etc.;

Single Event processing: For example, $(selector).bind("click",data,function);

Multiple event processing: 1. Use spaces to separate multiple events, such as $(selector).bind("click dbclick mouseout",data, function);

2. Use braces to flexibly define multiple events, such as $(selector).bind({event1:function, event2:function, ...})　

3. Space separation method: binding is relatively rigid. Functions cannot be individually bound to events, and are suitable for handling multiple events calling the same function;

braces alternative: binding is more flexible, and functions can be bound to events individually;

data: optional; parameters that need to be passed;

function: required; a function that needs to be executed when a binding event occurs;

Example:

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

Applicable to all versions, but according to the official website, the bind() function is recommended since jquery1.7 version on() instead.

II.ON():

Brief description

on() adds one or more event handlers to the specified element and specifies the function to run when these events occur. Event handlers using the on() method work on current or future elements (such as new elements created by a script).

How to use

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

event: required; one or more events added to the element, such as click, dblclick, etc.;

Single event processing: For example $(selector).on("click",childselector,data,function);

Multiple event processing:

1. Use spaces to separate multiple events, such as $(selector).on("click dbclick mouseout",childseletor ,data,function);

2. Use braces to flexibly define multiple events, such as $(selector).on({event1:function, event2:function, ...},childselector);

3. Space separation method : Binding is relatively rigid and cannot bind functions to events separately. It is suitable for handling multiple events calling the same function;

Braces alternative: Binding is more flexible and functions can be bound to events separately;

childSelector: Optional ;Elements that need to add event handlers, generally sub-elements of selector;

data: optional; parameters that need to be passed;

function: required; when the binding event occurs, the function that needs to be executed;

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

Applicable to Jquery version

jquery1.7 and above; jquery1.7 version is used to replace bind() and live() binding event methods after the emergence of jquery1.7 version;

Same points:

1. Both support single elements Binding of multiple events; space separation method or brace replacement method;

2. All events are passed to the document for event response through event bubbling;

Comparison and connection:

1.bind() The function can only set events for existing elements; however, live(), on(), and delegate() all support event settings for newly added elements in the future; the demo code

is as follows:

2.bind() function is in jquery version 1.7 was relatively popular before. After version 1.7 came out, bind() is no longer officially recommended. The replacement function is on(), which is also a newly added function in version 1.7. Similarly, it can be used instead of live() function, the live() function has been deleted in version 1.9;

3. The live() function is similar to the delegate() function, but the live() function is better than delegate() in terms of execution speed, flexibility and CSS selector support. Worse, if you want to know the specific situation, please click here:

4.bind() supports all versions of Jquery; live() supports jquery1.8-; delegate() supports jquery1.4.2+; on() supports jquery1.7+ ；

If the jquery version referenced in the project is a lower version, it is recommended to use delegate(). For higher versions of jquery, on() can be used instead. The above is only my personal opinion. If you have different ideas, please feel free to communicate.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jquery delayed object parsingNext article：jquery delayed object parsing

See more

Summary of binding event methods of bind() and on() in Jquery

Related articles