jQuery事件绑定方法详解：bind、live、delegate与on的区别与用法

作者：小圆点时间：2026-10-30 04:05:43浏览：483

本文详细解析jQuery中bind、live、delegate和on四种事件绑定方法的使用方式、适用版本及核心区别。通过对比单事件与多事件处理、参数传递及动态元素支持，阐明为何on()成为1.7+版本推荐方案，并指出各方法在性能与兼容性上的差异，帮助开发者根据项目需求选择合适的事件处理策略。

jQuery事件绑定方法概述

本文深入分析了jQuery中bind()、live()、delegate()以及on()这四种事件绑定方法的具体实现与应用。旨在为读者提供清晰的参考指南，内容涵盖各方法的语法结构、使用场景及版本兼容性。文中总结可能存在疏漏，欢迎指正，以下将直接进入核心内容讲解。

前言

在Web开发中，经常需要通过jQuery动态增删DOM元素，这直接关联到事件绑定的策略。为了便于日后查阅及帮助同行，本文简要梳理bind、live、delegate与on四者的区别与联系。

bind()方法详解

一、bind()方法

简要描述

bind()方法用于向匹配的元素添加一个或多个事件处理程序。

使用方式

代码如下:

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

event

event：必需参数。指定添加到元素的一个或多个事件类型，例如click、dblclick等。

单事件处理示例：

代码如下:

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

多事件处理示例： 1. 利用空格分隔多个事件，例如：

代码如下:

$(selector).bind("click dbclick mouseout",data,function);

2. 利用大括号灵活定义多事件，例如：

代码如下:

$(selector).bind({event1:function, event2:function, ...})

3. 空格分隔方式：绑定方式较为固定，无法为不同事件单独指定函数，适用于多个事件调用同一处理函数的场景。

大括号替代方式：绑定更为灵活，允许为不同事件单独绑定不同的处理函数。

data：可选参数，用于传递额外数据。 function：必需参数。当事件触发时执行的回调函数。

举例说明


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

适用Jquery版本

该方法适用于所有jQuery版本。但根据官方文档说明，自jQuery 1.7版本起，推荐使用on()方法替代bind()。

live()方法详解

二、live()方法

简要描述

live()方法用于向当前或未来匹配的元素添加一个或多个事件处理程序。

使用方式

代码如下:

$(selector).live(event,data,function)

event

event：必需参数。指定添加到元素的一个或多个事件类型，例如click、dblclick等。

单事件处理示例：

代码如下:

$(selector).live("click",data,function);

多事件处理示例： 1. 利用空格分隔多个事件，例如：

代码如下:

$(selector).live("click dbclick mouseout",data,function);

2. 利用大括号灵活定义多事件，例如：

代码如下:

$(selector).live({event1:function, event2:function, ...})

3. 空格分隔方式：绑定方式较为固定，无法为不同事件单独指定函数，适用于多个事件调用同一处理函数的场景。

大括号替代方式：绑定更为灵活，允许为不同事件单独绑定不同的处理函数。

data：可选参数，用于传递额外数据。 function：必需参数。当事件触发时执行的回调函数。

举例说明


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jquery中live()绑定事件方式</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").live("click", function () {
        //显示隐藏div
        $(".container").slideToggle();
      });
      /********添加多个事件处理********/
      //空格相隔方式
      $(".btn-test").live("mouseout click", function () {
        //显示隐藏div
        $(".container").slideToggle();
      });
      //大括号替代方式
      $(".btn-test").live({
        "mouseout": function () {
          alert("这是mouseout事件!");
        },
        "click": function () {
          $(".container").slideToggle();
        }
      });
      /********删除事件处理********/
      $(".btn-test").die("click");
    });
  </script>
</head>
<body>
  <input type="button" value="按钮" class="btn-test" />
  <div class="container">
  </div>
</body>
</html>

适用Jquery版本

该方法在jQuery 1.9版本之前可用。从jQuery 1.9开始，该方法已被移除，官方建议使用on()方法替代。

delegate()方法详解

三、delegate()方法

简要描述

delegate()方法为指定的元素（即被选元素的子元素）添加一个或多个事件处理程序，并规定这些事件触发时运行的函数。该方法支持当前及未来创建的元素（如脚本动态生成的元素）。

使用方式

代码如下:

$(selector).delegate(childSelector,event,data,function)

childSelector

childSelector：必需参数。指定需要添加事件处理程序的元素，通常为selector的子元素。

event

event：必需参数。指定添加到元素的一个或多个事件类型，例如click、dblclick等。

单事件处理示例：

代码如下:

$(selector).delegate(childselector,"click",data,function);

多事件处理示例： 1. 利用空格分隔多个事件，例如：

代码如下:

$(selector).delegate(childselector,"click dbclick mouseout",data,function);

2. 利用大括号灵活定义多事件，例如：

代码如下:

$(selector).delegate(childselector,{event1:function, event2:function, ...})

3. 空格分隔方式：绑定方式较为固定，无法为不同事件单独指定函数，适用于多个事件调用同一处理函数的场景。

大括号替代方式：绑定更为灵活，允许为不同事件单独绑定不同的处理函数。

data：可选参数，用于传递额外数据。 function：必需参数。当事件触发时执行的回调函数。

举例说明


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jquery中delegate()绑定事件方式</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 () {
      /***********单元素添加单事件***********/
      //按钮绑定单击事件 实现div的显示隐藏
      $(".header").delegate("#btn-test1", "click", function () {
        $(".container").slideToggle();
      });
      /***********单元素添加多事件***********/
      //空格相隔方式
      $(".header").delegate("#btn-test1", "click mouseout", function () {
        $(".container").slideToggle();
      });
      //大括号替代方式
      $(".header").delegate("#btn-test1", {
        "mouseout": function () {
          alert("这是mouseout事件!");
        },
        "click": function () {
          $(".container").slideToggle();
        }
      });
    });
  </script>
</head>
<body>
  <div class="header">
    <input type="button" value="按钮1" class="btn-test" id="btn-test1" />
    <input type="button" value="按钮2" class="btn-test" id="btn-test2" />
  </div>
  <div class="container">
  </div>
</body>
</html>

适用Jquery版本

该方法适用于jQuery 1.4.2及以上版本。

on()方法详解

四、on()方法

简要描述

on()方法为指定的元素添加一个或多个事件处理程序，并规定这些事件触发时运行的函数。该方法支持当前及未来创建的元素（如脚本动态生成的元素）。

使用方式

代码如下:

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

event

event：必需参数。指定添加到元素的一个或多个事件类型，例如click、dblclick等。

单事件处理示例：

代码如下:

$(selector).on("click",childSelector,data,function);

多事件处理示例： 1. 利用空格分隔多个事件，例如：

代码如下:

$(selector).on("click dbclick mouseout",childseletor,data,function);

2. 利用大括号灵活定义多事件，例如：

代码如下:

$(selector).on({event1:function, event2:function, ...},childSelector);

3. 空格分隔方式：绑定方式较为固定，无法为不同事件单独指定函数，适用于多个事件调用同一处理函数的场景。

大括号替代方式：绑定更为灵活，允许为不同事件单独绑定不同的处理函数。

childSelector：可选参数。指定需要添加事件处理程序的元素，通常为selector的子元素。 data：可选参数，用于传递额外数据。 function：必需参数。当事件触发时执行的回调函数。

举例说明


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

适用Jquery版本

该方法适用于jQuery 1.7及以上版本。自1.7版本引入后，用于替代bind()和live()这两种旧式事件绑定方式。

四种方法对比与总结

五、四种方式的异同和优缺点

相同点：

1. 均支持对单个元素绑定多个事件，可通过空格分隔方式或大括号替代方式实现。 2. 均通过事件冒泡机制，将事件传递至document层进行响应处理。

比较和联系:

1. bind()方法仅能对已存在的元素进行事件绑定；而live()、on()和delegate()均支持对未来新增元素的事件绑定。演示代码如下:


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jquery中四种方式给未来元素设置事件</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 () {
      //利用bind()方法，给P标签设置click方法  ======失败 没有任何反应=======
      $(".container p").bind("click", function () {
        alert("bind()添加单击事件成功!");
      });
      //利用live()方法.给P标签设置click方法  =======成功调用方法============
      $(".container p").live("click", function () {
        alert("live()添加单击事件成功!");
      });
      //利用delegate()方法.给P标签设置click方法 =======成功调用方法============
      $(".container").delegate("p", "click", function () {
        //显示隐藏div
        alert("delegate()添加单击事件成功!");
      });
      //利用on()方法.给P标签设置click方法 =======成功调用方法============
      $(".container").on("click", "p", function () {
        //显示隐藏div
        alert("on()添加单击事件成功!");
      });
      //按钮添加P标签
      $(".btn-test").click(function () {
        $(".container").append("<p>这是新增的段落!</p>");
      });
    });
  </script>
</head>
<body>
  <input type="button" class="btn-test" value="添加元素" />
  <div class="container">
  </div>
</body>
</html>

2. 在jQuery 1.7版本之前，bind()较为常用。1.7版本发布后，官方不再推荐bind()，转而推荐使用新引入的on()方法，同时on()也可用于替代已废弃的live()方法。live()方法已在1.9版本中被移除。

3. live()与delegate()功能相似，但live()在执行速度、灵活性及CSS选择器支持方面均弱于delegate()。如需了解详细对比，可参考《jQuery中的.bind()、.live()和.delegate()之间区别分析》一文。

4. 版本兼容性总结：bind()支持所有jQuery版本；live()支持jQuery 1.8及以下版本；delegate()支持jQuery 1.4.2及以上版本；on()支持jQuery 1.7及以上版本。

六、总结

若项目引用的jQuery版本较低，推荐使用delegate()；若使用高版本jQuery，则建议使用on()。以上观点仅供参考，欢迎交流探讨。

更多关于jQuery事件相关内容感兴趣的读者可查看本站专题：《jQuery常见事件用法与技巧总结》

希望本文所述对大家jQuery程序设计有所帮助。

作者最新文章

JS在setTimeout或Ajax回调中打开新标签页失败怎么处理

2026-11-05 15:50:12

JS直播协议选型：HLS、FLV与WebRTC的延迟与兼容性对比

2026-11-05 12:16:14

JS实现回到顶部：scrollTop赋值与浏览器兼容性处理

2026-11-04 23:43:35

JS使用classList动态添加、移除和切换CSS类名

2026-11-04 23:40:58

在 D3.js 中实现平滑过渡动画的技巧

2026-11-03 23:46:09