jQuery中的“ on”和“ live”或“ bind”有什么区别?

jQueryon()方法

on(events [,选择器] [,data],handler)方法将处理程序绑定到所有当前-和将来-匹配元素的事件(如click)。它还可以绑定自定义事件。

这是此方法使用的所有参数的描述-

  • 事件-事件类型用空格分隔。

  • 选择器 -选择器字符串

  • 数据 -数据将被传递到event.data事件处理程序

  • handler- 绑定到每个匹配元素集上的事件的函数

示例

您可以尝试运行以下代码以了解如何使用on()方法-

<html>

   <head>
      <title>jQuery on() method</title>
      <script src = "https://cdn.staticfile.org/jquery/2.1.3/jquery.min.js"></script>
       
      <script>
         $(document).ready(function() {
            $('div').on('click', function( event ){
               alert('Hi there!');
            });
         });
      </script>
       
      <style>
         .div {
             margin:10px;
             padding:12px;
             border:2px solid #666;
             width:60px;
         }
      </style>
   </head>
   
   <body>
   
      <p>Click on any square below to see the result:</p>
       
      <div class = "div" style = "background-color:blue;"></div>
      <div class = "div" style = "background-color:green;"></div>
      <div class = "div" style = "background-color:red;"></div>
       
   </body>
</html>

<html>
<head>
<title>jQuery live() method</title>
<script src = "https://cdn.staticfile.org/jquery/1.6.1/jquery.min.js"></script>
   <script>
   
   $(document).ready(function() {

     $('div').live('click', function( event ){
         alert('Hi there!');
     });

   });

   </script>
   <style>
      .div{
          margin:10px;
          padding:12px;
          border:2px solid #666;
          width:60px;
      }
  </style>
</head>
<body>
   <p>Click on any square below to see the result:</p>
   <div class="div" style="background-color:blue;"></div>
   <div class="div" style="background-color:green;"></div>
   <div class="div" style="background-color:red;"></div>
</body>
</html>

注意live()-jQuery 1.7中已弃用的jQuery方法。终于在jQuery 1.9中将其删除。要运行以下程序,请使用1.7之前的jQuery版本。

jQuerybind()方法

bind(type,[data],fn)方法将处理程序绑定到每个匹配元素的一个或多个事件(如click)。它还可以绑定自定义事件。

这是此方法使用的所有参数的描述-

  • type- 一种或多种事件类型,以空格分隔。

  • 数据 -这是可选参数,表示作为event.data传递到事件处理程序的其他数据。

  • fn- 绑定到每个匹配元素集上的事件的函数。

示例

您可以尝试运行以下代码以了解如何使用bind()方法-

<html>

   <head>
      <title>jQuery bind() method</title>
      <script src = "https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
       
      <script>
         $(document).ready(function() {
            $('div').bind('click', function( event ){
               alert('Hi there!');
            });
         });
      </script>
       
      <style>
         .div {
             margin:10px;
             padding:12px;
             border:2px solid #666;
             width:60px;
         }
      </style>
   </head>
   
   <body>
   
      <p>Click on any square below to see the result:</p>
       
      <div class = "div" style = "background-color:blue;"></div>
      <div class = "div" style = "background-color:green;"></div>
      <div class = "div" style = "background-color:red;"></div>
       
   </body>
</html>