一、前言

最近在做项目中要用到jQuery来绑定事件，首先想到的是$(selector).事件名();这样绑定事件的方式，这种方式对事件进行绑定其实也就是bind()方法，但当选择器匹配的元素过多，$(selector).事件名();对每个元素进行迭代绑定，会影响性能。除了这种方式可以绑定事件以外，还有live()(已过期)、delegate()、on()方法绑定事件，接下来分析一下它们的区别，以及使用哪种方式最值得推荐。由于live()方法已过期，只分析另外三种，欢迎拍砖、吐槽~~~

二、用法与区别

先准备一个example，用于不同方法绑定事件测试与对比。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>on()、delegate()、bind()事件绑定测试</title>

    <link rel="stylesheet" type="text/css" href="bootstrap.css">

</head>

<body>

    <div style="width:800px;margin:50px auto;">

        <botton class="btn btn-success" id="btn">新增一个p元素</botton>

        <p>1</p>

        <p>2</p>

    </div>

    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">

        $(document).ready(function(){

            $('#btn').click(function(){

                $('div').append('<p>新增一个p元素</p>');

            });

        });

    </script>

</body>

</html>

接下来对所有的p元素绑定click事件，如：

bind()方法：为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。

使用方式 $(selector).bind(event,data,function)

event  必需。规定添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。

data 可选。规定传递到函数的额外数据。

function 必需。规定当事件发生时运行的函数。

$('div p').bind('click', function(){

    alert($(this).text());

});

这样就为所有的p元素绑定了click事件，当点击后会弹出其内容。但有两个问题，

第一个问题，这里用了隐式迭代的方法，如果匹配到的元素特别多的时候，比如如果我在div里放了10个p元素，就得执行绑定10次。对于大量元素来说，影响到了性能。
但是如果是id选择器，因为id唯一，用bind()方法就很快捷了。
第二个问题，对于尚未存在的元素，无法绑定。点击页面上的按钮，将动态新增一个p元素，点击这个p元素，会发现没有点击响应。

bind()方法的另外一种写法是：

$('div p').click(function(){

    alert($(this).text());
});

delegate()方法：为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数，使用delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。

使用方式：$(selector).delegate(childSelector,event,data,function)

childSelector 必需。规定要附加事件处理程序的一个或多个子元素。

event 必需。规定附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。

data 可选。规定传递到函数的额外数据。

function 必需。规定当事件发生时运行的函数。

$('div').delegate('p', 'click', function(){

     alert($(this).text());

});

delegate()方式根据事件委托的机制，不是为p元素直接绑定点击事件，而是为其父元素(或祖先元素)绑定点击事件，当点击任意p元素时，事件会一层层的冒泡，直到绑定事件的元素，在冒泡过程中事件流捕获的对象与选择器匹配时，就会执行这段alert($(this).text());代码。

所以使用delegate()方法就解决了用bind()方法的上面两个问题，不必为每个p元素绑定事件，也可以为动态新增的p元素绑定事件。虽然绑定是实现了，但是调用的时候也可能出现问题。如果事件目标在DOM树中很深的位置，这样一层层冒泡上来查找与选择器匹配的元素，又影响到性能了。

on() 方法：为指定的元素,添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 on() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

使用方式：$(selector).on(event,childselector,data,function)

event：必需项；添加到元素的一个或多个事件，例如 click,dblclick等；

childSelector: 可选；需要添加事件处理程序的元素，一般为selector的子元素；

data：可选；需要传递的参数；

function：必需；当绑定事件发生时，需要执行的函数；

$('div').on('click', 'p', function(){

     alert($(this).text());

});

on()方法的效果和delegate()方法的效果相同，通过查看jQuery源码你会发现无论bind()还是delegate()其实都是通过on()方法实现的，只是参数不同。三种方法的源码(jQuery source viewer)如下：

       jQuery.fn.bind = function (types, data, fn) {

            return this.on(types, null, data, fn);

        };

        jQuery.fn.delegate = function (selector, types, data, fn) {

            return this.on(types, selector, data, fn);

        };

        jQuery.fn.on = function (types, selector, data, fn,one) {

            var origFn, type;

            // Types can be a map of types/handlers

            if (typeof types === "object") {

                // ( types-Object, selector, data )

                if (typeof selector !== "string") {

                    // ( types-Object, data )

                    data = data || selector;

                    selector = undefined;

                }

                for (type in types) {

                    this.on(type, selector, data, types[type], one);

                }

                return this;

            }

            if (data == null && fn == null) {

                // ( types, fn )

                fn = selector;

                data = selector = undefined;

            } else if (fn == null) {

                if (typeof selector === "string") {

                    // ( types, selector, fn )

                    fn = data;

                    data = undefined;

                } else {

                    // ( types, data, fn )

                    fn = data;

                    data = selector;

                    selector = undefined;

                }

            }

            if (fn === false) {

                fn = returnFalse;

            } else if (!fn) {

                return this;

            }

            if (one === 1) {

                origFn = fn;

                fn = function (event) {

                    // Can use an empty set, since event contains the info

                    jQuery().off(event);

                    return origFn.apply(this, arguments);

                };

                // Use same guid so caller can remove using origFn

                fn.guid = origFn.guid || (origFn.guid = jQuery.guid++);

            }

            return this.each(function () {

                jQuery.event.add(this, types, fn, data, selector);

            });

        };

jQuery官方推荐使用on()绑定事件。

三、总结

当选择器匹配到的元素比较多时，不要用bind()迭代绑定，会影响性能；用id选择器时，可以使用bind()，简单便捷；要给动态新增的元素绑定事件时，用delegate()或on()，官方推荐使用on()。

如需转载本文，请注明来源： http://www.cnblogs.com/changjianqiu/

jQuery中事件绑定的更多相关文章

  1. jQuery中事件绑定到bind、live、delegate、on方法的探究

    1. 给页面上的某个元素绑定事件,最初采用下面的方式实现: $(‘selector’).click(function(){ //code }); 缺点: 不能同时绑定多个事件,不能绑定动态的元素. 后 ...

  2. !!!jQuery中事件绑定 推荐使用.delegate()或者live()

    jQuery中的.bind()..live()和.delegate()之间区别分析 参考:http://www.jb51.net/article/27309.htm DOM树   首先,可视化一个HM ...

  3. jq中事件绑定的方法

    在唯品会实习生面试中,被面试官问了这么一个问题,“jQuery中绑定事件的方法有几个?”,以click事件为例,我当时想到的只有.click(),.bind(),.on()这三种,然后面试官又追问,“ ...

  4. jquery-10 jquery中的绑定事件和解绑事件的方法是什么

    jquery-10 jquery中的绑定事件和解绑事件的方法是什么 一.总结 一句话总结:bind(); unbind(); one(); 1. jquery中的绑定事件和解绑事件的方法是什么? bi ...

  5. JS中事件绑定的三种方式

    以下是搜集的在JS中事件绑定的三种方式.   1. HTML onclick attribute     <button type="button" id="upl ...

  6. python 全栈开发，Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))

    一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...

  7. Jquery中on绑定的一些小坑

    ---恢复内容开始--- 今天我们来说说关于JQuery中事件绑定中on绑定的一些小问题,直接上代码了,大家拷下去就可以用 <!DOCTYPE html> <html lang=&q ...

  8. 对jQuery的事件绑定的一些思考

    jQuery的事件绑定 问题 首先我们看下面的一个非经常见的事件绑定代码: //example $('#dom').click(function(e){ //do something }); $('# ...

  9. JavaScript 中事件绑定的三种方式

    以下是在 JS 中事件绑定的三种方式.   1. HTML onclick attribute     <button type="button" id="uplo ...

随机推荐

  1. 树状数组优化DP 【模拟赛】删区间

    哇,难受得一匹. 看到题的一瞬间竟然只想到了\(n^3\)的区间\(DP\) 一.\(40pts\) 设\(f[i][j]\)代表删去\(i\)到\(j\)这一段区间的最小代价和. 然后直接写普通的区 ...

  2. [BZOJ4772]显而易见的数论(数论)

    4772: 显而易见的数论 Time Limit: 40 Sec  Memory Limit: 256 MBSubmit: 76  Solved: 32[Submit][Status][Discuss ...

  3. [CF864F]Cities Excursions

    题目大意: 一个$n(n\le3000)$个点的有向图,$q(q\le4\times10^5)$组询问,每次询问$s_i,t_i$之间是否存在一条字典序最小的路径(可以重复经过不为$t_i$的结点). ...

  4. Spring Boot中使用MyBatis注解配置详解

    传参方式 下面通过几种不同传参方式来实现前文中实现的插入操作. 使用@Param 在之前的整合示例中我们已经使用了这种最简单的传参方式,如下: @Insert("INSERT INTO US ...

  5. 软件配置篇-java下载及安装

    1.进入java官网下载合适版本: 下载地址:https://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.htm ...

  6. Word绘制跨行表格

    如图“用户评价电影数目”,我们需要均分第一行,选中这三个个,设置了表个高度0.5cm,但是发现上面的一个比较考上,我们需要找到水平竖直居中,那么双击表格,打开表格工具,有设计和布局,切换到布局就找到了 ...

  7. Coherence的集群成员的离开和加入机制研究

    最近在客户那里环境中coherence集群不稳定,所以找出一些文档,需要搞清楚Coherence内部的一些机制 1.集群成员的离开 关于状态的检测,官方的说法是: Death detection is ...

  8. django+celery+redis实现运行定时任务

    0.目的 在开发项目中,经常有一些操作时间比较长(生产环境中超过了nginx的timeout时间),或者是间隔一段时间就要执行的任务. 在这种情况下,使用celery就是一个很好的选择.   cele ...

  9. ubuntu登录黑屏“failed to start session”, gdm+kdm+lightdm

    sudo apt-get install ubuntu-desktop sudo systemctl start gdm sudo service lightdm restart sudo syste ...

  10. linux下获取占用CPU资源最多的10个进程

    linux下获取占用CPU资源最多的10个进程,可以使用如下命令组合: ps aux|head -1;ps aux|grep -v PID|sort -rn -k +3|head linux下获取占用 ...