jQuery bind()方法：事件绑定的基础机制-代码号

前面讲 click() 的时候提过，jQuery 有多种方式来绑定事件。bind() 就是其中比较早期、也比较核心的一个。它可以直接给选中元素绑定一个或多个事件处理函数，是很多快捷事件方法（比如 click()、hover() 等）的底层实现。

不过需要先说明一点：从 jQuery 1.7 版本开始，官方推荐用 on() 来替代 bind()。on() 的功能覆盖 bind()，而且支持事件委托，灵活性更强。但这不意味着 bind() 没有学习的价值——理解它的用法能帮你更好地看懂旧项目代码，也能更清楚地知道 on() 到底在 bind() 的基础上改进了什么。

语法形式

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

四个参数里，event 和 function 是必填的，data 和 map 是可选的。

event（必填）： 要绑定的事件类型，比如 "click"、"mouseenter"。如果想同时绑定多个事件，用空格分隔，如 "mouseenter mouseleave"。

data（可选）： 传递给事件处理函数的额外数据。这个参数平时用得不多，但在需要把外部变量传入回调函数时很方便。

function（必填）： 事件触发时执行的回调函数。

map（可选）： 一个事件映射对象，可以用键值对的形式一次性绑定多个事件。这个写法比较简洁，后面示例会演示。

基础示例：用 bind 绑定点击事件

下面这个例子用 bind() 给段落绑了一个 click 事件，点击后弹出提示。写法和 $("p").click() 效果一样，只是语法略有不同。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>bind() 基础示例</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
    <p>点击这段文字</p>

    <script>
        $(document).ready(function(){
            $("p").bind("click", function(){
                alert("你点击了这段文字！");
            });
        });
    </script>
</body>
</html>

和 $("p").click(function(){...}) 相比，bind("click", function(){...}) 就是把事件类型从方法名移到了第一个参数的位置。功能上没有区别，但 bind() 的优势在于它可以把多个事件类型统一处理。

进阶示例：同时绑定多个事件

bind() 比较方便的一个特性是可以一次性给同一个元素绑定多种事件。下面这个例子给段落绑了三种事件：单击、双击、鼠标进入/离开。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>bind() 多事件示例</title>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <style>
        .text-block {
            background: #f9e79f;
            font-weight: bold;
            cursor: pointer;
            padding: 8px;
            margin-bottom: 6px;
        }
        .text-block.hover {
            background: #ccc;
        }
        .info {
            color: #c0392b;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p class="text-block">单击或双击这段文字</p>
    <span class="info"></span>

    <script>
        // 绑定单击事件，显示点击坐标
        $("p.text-block").bind("click", function(event){
            var coord = "( 横坐标: " + event.pageX + ", 纵坐标: " + event.pageY + " )";
            $("span.info").text("这是单击事件！" + coord);
        });

        // 绑定双击事件
        $("p.text-block").bind("dblclick", function(){
            $("span.info").text("这是双击事件，目标元素是 " + this.nodeName);
        });

        // 同时绑定鼠标进入和离开事件，用空格分隔两个事件类型
        $("p.text-block").bind("mouseenter mouseleave", function(event){
            $(this).toggleClass("hover");
        });
    </script>
</body>
</html>

代码里三个 bind() 调用分别处理不同的事件逻辑：

单击时显示鼠标点击位置的页面坐标，这里用到了 event.pageX 和 event.pageY，这两个是事件对象自带的属性。
双击时显示一条文字提示，this.nodeName 拿到的是触发事件的元素标签名（这里是 P）。
鼠标进入和离开共享同一个处理函数，通过 toggleClass 切换背景色。注意 "mouseenter mouseleave" 用空格分隔，表示同时绑了两个事件，触发任意一个都会执行回调。

事件映射的写法

bind() 的 map 参数允许用对象的形式一次性绑定多个事件，代码结构更清晰：

$("p.text-block").bind({
    click: function(event){
        // 单击处理
    },
    dblclick: function(){
        // 双击处理
    },
    mouseenter: function(){
        $(this).addClass("hover");
    },
    mouseleave: function(){
        $(this).removeClass("hover");
    }
});

这种写法把事件类型和回调函数的对应关系写在一个对象里，比多次调用 bind() 更紧凑。在需要给一个元素绑定三四种事件的时候，映射写法的可读性明显更好。

bind() 和 on() 的关系

前面提到官方推荐用 on() 替代 bind()，这里具体说一下原因。on() 的语法和 bind() 几乎一样：

// bind 写法
$("p").bind("click", function(){...});

// on 写法
$("p").on("click", function(){...});

两者功能等价，但 on() 多了一个重要的能力——支持事件委托。通过给 on() 传第二个可选参数（选择器字符串），可以把事件绑定到父元素上，由父元素代理处理子元素的事件。这在处理动态添加的元素时非常关键，bind() 做不到这一点。

我的个人习惯是，新项目里全部用 on()，保持一致性。但在阅读和维护老代码时，遇到 bind() 要知道它是什么意思、怎么改成 on()。迁移起来也很简单，把 bind 直接替换成 on，参数位置不变，功能兼容。

本节课程知识要点

bind() 用于给选中元素绑定一个或多个事件处理函数，是 on() 出现之前的事件绑定主要方式。
事件类型可以用空格分隔实现多事件绑定，多个事件共享同一个回调函数。
支持事件映射写法，以对象形式一次性绑定多个事件，代码更紧凑清晰。
回调函数中可以通过 event 参数获取事件相关信息，如 event.pageX、event.pageY 坐标。
jQuery 1.7 之后官方推荐使用 on() 代替 bind()，on() 语法兼容 bind() 且额外支持事件委托。

bind() 是 jQuery 事件绑定机制里承上启下的一环。它比快捷方法（click()、hover() 等）更底层、更灵活，又在 on() 出现后逐渐被取代。理解 bind() 的用法和参数结构，对于掌握整个 jQuery 事件体系的演进脉络很有帮助。接下来讲 on() 方法的时候，你会发现很多概念是相通的，只是能力上又往前走了一步。

本文标签：

jQuery bind()方法：事件绑定的基础机制