jQuery中bind和on的区别

---

前言

在 jQuery 中，bind() 和 on() 都是用于绑定事件处理程序的方法，它们的功能很相似，但有一些区别

---

一、bind()

功能：.bind() 方法用于将事件处理程序附加到元素上，类似于 .on() 方法。

语法：.bind() 的基本语法是 $(选择器).bind(事件类型, 处理程序)。

例如，例如，$(button).bind(‘click’, myFunction) 将 myFunction 函数附加到指定的 button 元素的点击事件上。

    <button id="myButton">点击我</button>
    <div id="output"></div>

    <script>
        // 使用 .bind() 方法附加点击事件处理程序
        $("#myButton").bind("click", function () {
            $("#output").text("按钮被点击了！");
        });
    </script>

注意：从 jQuery 版本 3.0 开始，.bind() 的使用已被弃用，官方推荐使用更加灵活和高效的 .on() 方法。

二、on()

功能：.on() 方法也用于将事件处理程序附加到元素上，它是 .bind() 的现代替代方法。

语法：.on() 的基本语法是 $(选择器).on(事件类型, [选择器], 处理程序)。

例如：$(button).on(‘click’, myFunction) 将 myFunction 函数附加到指定的 button 元素的点击事件上。

    <button id="myButton">点击我</button>
    <div id="output"></div>

    <script>
        // 使用 .on() 方法附加点击事件处理程序
        $("#myButton").on("click", function () {
            $("#output").text("按钮被点击了！");
        });
    </script>

三、区别

区别：与 .bind() 不同的是，.on() 方法可以附加额外的参数，如可选的选择器，用于对事件目标进行过滤。这样，您可以只在满足选择器条件的元素上触发事件处理程序。

这两个示例代码都实现了在按钮点击时在页面上显示文本的功能。无论是使用 .bind() 还是 .on() 方法，都可以达到相同的效果。然而，建议使用 .on() 方法，因为它是更现代且更灵活的方法，并且在 jQuery 3.0 及以后的版本中推荐使用。

总结：.bind() 和 .on() 都用于附加事件处理程序，但推荐使用 .on() 方法，因为它提供了更多灵活的功能，并且是 jQuery 官方推荐的方法。.bind() 方法在 jQuery 3.0 及以后的版本中已被弃用。

---