javascript事件委托和jQuery事件绑定on、off 和one以及on绑定多个事件(重要)

一. 事件委托
什么是事件委托？用现实中的理解就是：有100 个学生同时在某天中午收到快递，但这
100 个学生不可能同时站在学校门口等，那么都会委托门卫去收取，然后再逐个交给学生。
而在jQuery 中，我们通过事件冒泡的特性，让子元素绑定的事件冒泡到父元素(或祖先元素)
上，然后再进行相关处理即可。
如果一个企业级应用做报表处理，表格有2000 行，每一行都有一个按钮处理。如果用
之前的.bind()处理，那么就需要绑定2000 个事件，就好比2000 个学生同时站在学校门口等
快递，不断会堵塞路口，还会发生各种意外。这种情况放到页面上也是一样，可能导致页面
极度变慢或直接异常。而且，2000 个按钮使用ajax 分页的话，.bind()方法无法动态绑定尚
未存在的元素。就好比，新转学的学生，快递员无法验证他的身份，就可能收不到快递。

//HTML 部分
<div style="background:red;width:200px;height:200px;" id="box">
<input type="button" value="按钮" class="button" />
</div>
//使用.bind()不具备动态绑定功能，只有点击原始按钮才能生成
$('.button').bind('click', function () {
$(this).clone().appendTo('#box');
});
//使用.live()具备动态绑定功能，jQuery1.3 使用，jQuery1.7 之后废弃，jQuery1.9 删除
$('.button').live('click', function () {
$(this).clone().appendTo('#box');
});
.live()原理就是把click 事件绑定到祖先元素$(document)上，而只需要给$(document)绑
定一次即可，而非2000 次。然后就可以处理后续动态加载的按钮的单击事件。在接受任何
事件时，$(document)对象都会检查事件类型(event.type)和事件目标(event.target)，如果click
事件是.button，那么就执行委托给它的处理程序。.live()方法已经被删除，无法使用了。需
要测试使用的话，需要引入向下兼容插件。
//.live()无法使用链接连缀调用，因为参数的特性导致
$('#box').children(0).live('click', function () {
$(this).clone().appendTo('#box');
});
在上面的例子中，我们使用了.clone()克隆。其实如果想把事件行为复制过来，我们只
需要传递true 即可：.clone(true)。这样也能实现类似事件委托的功能，但原理却截然不同。
一个是复制事件行为，一个是事件委托。而在非克隆操作下，此类功能只能使用事件委托。
$('.button').live('click', function () {
$('<input type="button" value="复制的" class="button" />').appendTo('#box');
});
当我们需要停止事件委托的时候，可以使用.die()来取消掉。
$('.button').die('click');
由于.live()和.die()在jQuery1.4.3 版本中废弃了，之后推出语义清晰、减少冒泡传播层次、
又支持链接连缀调用方式的方法：.delegate()和.undelegate()。但这个方法在jQuery1.7 版本中
被.on()方法整合替代了。
$('#box').delegate('.button', 'click', function () {
$(this).clone().appendTo('#box');
});
$('#box').undelegate('.button','click');
//支持连缀调用方式
$('div').first().delegate('.button', 'click', function () {
$(this).clone().appendTo('div:first');
});

注意：.delegate()需要指定父元素，然后第一个参数是当前元素，第二个参数是事件方
式，第三个参数是执行函数。和.bind()方法一样，可以传递额外参数。.undelegate()和.unbind()
方法一样可以直接删除所有事件，比如：.undelegate('click')。也可以删除命名空间的事件，
比如：.undelegate('click.abc')。
注意：.live()和.delegate()和.bind()方法一样都是事件绑定，那么区别也很明显，用途上
遵循两个规则：1.在DOM 中很多元素绑定相同事件时；2.在DOM 中尚不存在即将生成的
元素绑定事件时；我们推荐使用事件委托的绑定方式，否则推荐使用.bind()的普通绑定。

二．on、off 和one
目前绑定事件和解绑的方法有三组共六个。由于这三组的共存可能会造成一定的混乱，
为此jQuery1.7 以后推出了.on()和.off()方法彻底摒弃前面三组。
//替代.bind()方式
$('.button').on('click', function () {
alert('替代.bind()');
});
//替代.bind()方式，并使用额外数据和事件对象
$('.button').on('click', {user : 'Lee'}, function (e) {
alert('替代.bind()' + e.data.user);
});
//替代.bind()方式，并绑定多个事件
$('.button').on('mouseover mouseout', function () {
alert('替代.bind()移入移出！');
});
//替代.bind()方式，以对象模式绑定多个事件
$('.button').on({
mouseover : function () {
alert('替代.bind()移入！');
},
mouseout : function () {
alert('替代.bind()移出！');
}
});
//替代.bind()方式，阻止默认行为并取消冒泡
$('form').on('submit', function () {
return false;
});
或
$('form').on('submit', false);
//替代.bind()方式，阻止默认行为
$('form').on('submit', function (e) {
e.preventDefault();
});
//替代.bind()方式，取消冒泡
$('form').on('submit', function (e) {
e.stopPropagation();
});
//替代.unbind()方式，移除事件
$('.button').off('click');
$('.button').off('click', fn);
$('.button').off('click.abc');
//替代.live()和.delegate()，事件委托
$('#box').on('click', '.button', function () {
$(this).clone().appendTo('#box');
});
//替代.die()和.undelegate()，取消事件委托
$('#box').off('click', '.button');
注意：和之前方式一样，事件委托和取消事件委托也有各种搭配方式，比如额外数据、
命名空间等等，这里不在赘述。
不管是.bind()还是.on()，绑定事件后都不是自动移除事件的，需要通过.unbind()和.off()
来手工移除。jQuery 提供了.one()方法，绑定元素执行完毕后自动移除事件，可以方法仅触
发一次的事件。
//类似于.bind()只触发一次
$('.button').one('click', function () {
alert('one 仅触发一次！');
});
//类似于.delegate()只触发一次
$('#box).one('click', 'click', function () {
alert('one 仅触发一次！');
});

三:例子:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script src="js/jquery-1.8.3.js"></script>

    <script>

        $(function () {

            // 动态添加的不起作用

            $(".me1").click(function () {

                alert("jQuery click绑定事件");

            });

            //            动态添加的不起作用

            $(".me2").bind('click', function () {

                alert("jQuery bind绑定事件");

            });

            // 动态添加的起作用， jquery   1.9on取代live

            $('.me3').live('click', function () {

//            $('.me3').on('click', function () {

                alert("jQuery live绑定事件.");

            });

            $('.me4').on('click', function () {

                alert("jQuery on绑定事件.");

            });

            //动态添加的不起作用

            $('#live').live('click', function () {

                alert("事件委托");

            });

        });

    </script>

    <title>Title</title>

</head>

<body>

<input type="button" value="onclick" class="me1">

<input type="button" value="bind" class="me2">

<input type="button" value="live" class="me3">

<input type="button" value="on" class="me4">

<input type="button" value="增加标签" class="me11" onclick="addOne()">

<div id="live">

    <p>AAA</p>

    <p>AAA</p>

    <p>AAA</p>

    <p>AAA</p>

    <p>AAA</p>

</div>

<script>

    function addOne() {

        $('body').append($('<br/><input type="button" value="动态加的onclick不起作用" class="me1">'));

        $('body').append($('<input type="button" value="动态加的bind不起作用" class="me2">'));

        $('body').append($('<input type="button" value="动态加的live不起作用" class="me3">'));

        $('body').append($('<input type="button" value="动态加的on不起作用" class="me4">'));

    }

</script>

</body>

</html>

结果:红线圈的点击可以弹框

改进:使on可以委托(js加的也起作用)

先将事件绑定到body身上再过滤到.me4(也就是事件在class为me4身上)

            $('body').on('click','.me4', function () {

                alert("jQuery on绑定事件.");

            });

改进:on绑定多个事件并进行委托：

参数中写多个事件，根据事件类型进行判断(下面效果是实现hover()函数)

    $("body").on("mouseover mouseout",'.el_unflod',function(event){

            if(event.type == "mouseover"){

                    // 鼠标悬浮

                alert("鼠标悬停")

            }else if(event.type == "mouseout"){

                // 鼠标离开

                }

})

四:总结

bind:绑定事件，页面初始化绑定，可以同时绑定多个，JS动态添加的元素不起作用。而且用unbind()去掉事件只能去掉bind绑定的事件，对于标签种写的onclick属性之类的事件需要调用removeAttr删除属性才可以去掉事件，切记在bind事件之前去掉元素的onclick属性等事件。

onclick: 绑定事件，页面初始化绑定，一次绑定一个，JS动态添加的元素不起作用,bind的简便写法

live: 事件委托，也是事件绑定，JS动态加入的元素仍然起作用(事件委托:动态添加的元素仍然有事件)

on: 绑定事件，也是绑定事件(功能更强大),运用上述方法可以实现委托，动态添加的元素仍然有事件。

返回值:jQueryon(events,[selector],[data],fn)

概述

在选择元素上绑定一个或多个事件的事件处理函数。

on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中，.on()方法 提供绑定事件处理程序所需的所有功能。帮助从旧的jQuery事件方法转换，see .bind(), .delegate(), 和 .live(). 要删除的.on()绑定的事件，请参阅.off()。要附加一个事件，只运行一次，然后删除自己， 请参阅.one()

参数

events,[selector],[data],fnV1.7events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。

selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。

data:当一个事件被触发时要传递event.data给事件处理函数。

fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。

events-map,[selector],[data]V1.7events-map:个用字符串表示的，一个或多个空格分隔的事件类型和可选的命名空间，值表示事件绑定的处理函数。

selector:一个选择器字符串过滤选定的元素，该选择器的后裔元素将调用处理程序。如果选择是空或被忽略，当它到达选定的元素，事件总是触发。

data:当一个事件被触发时要传递event.data给事件处理函数。

参考:http://www.cnblogs.com/sooj/archive/2014/02/25/3566718.html

javascript事件委托和jQuery事件绑定on、off 和one以及on绑定多个事件(重要)的更多相关文章

javascript事件委托和jquery事件委托
元旦过后,新年第一篇. 初衷:很多的面试都会涉及到事件委托,前前后后也看过好多博文,写的都很不错,写的各有千秋,自己思前想后,为了以后自己的查看,也同时为现在找工作的前端小伙伴提供一个看似更全方位的解 ...
JQuery的事件委托；jQuery注册事件；jQuery事件解绑
一.事件 ①事件委托:就是给子元素的父元素或者祖先元素注册一个事件,但是事件的执行者是子元素,委托事件的好处是能够给动态创建出来时元素也加上事件. ②简单事件:就是给自己注册事件自己执行动态创建出来的 ...
javascript事件委托和jQuery事件绑定on、off 和one
一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生.而在jQuery 中, ...
javascript 事件委托和jQuery事件绑定on、off 和one
一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生.而在jQuery 中, ...
js事件委托和jQuery事件绑定on , off , one , bind , unbind , die
一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生.而在jQuery 中, ...
事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
一.事件冒泡定义事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...
什么是事件委托？jquery和js怎么去实现？
事件委托又叫事件代理,事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. js: window.onload = function(){ var oul = docume ...
转载： jQuery事件委托( bind() \ live() \ delegate()) [委托和绑定的故事]
转载:http://blog.csdn.net/zc2087/article/details/7287429 随着DOM结构的复杂化和Ajax等动态脚本技术的运用,事件委托自然浮出了水面.jQuery ...
jquery 事件委托
什么事件委托? DOM在为页面中的每个元素分派事件时,相应的元素一般都在事件冒泡阶段处理事件.在类似 body > div > a 这样的结构中,如果单击a元素,click事件会从a一直冒 ...

随机推荐

DRM 简介
首先,我们对和DRM 相关的一些概念进行介绍. Buffer: 对于RAC 数据库,当一个数据块被读入到buffer cache后,我们就称其为buffer , cache fusion 会将这个bu ...
socket的BeginConnect(EndPoint remoteEP,AsyncCallback callback,objcet state);个人理解
1.socket.BeginConnect(); 其中的三个参数值EndPoint remoteEP,这个是用来指定连接的socket服务器的的地址 socket参数表 EndPoint remote ...
DirectX9(翻译):介绍
一.简介二.DirectX Software Development Kit 这本帮助文档总共分为五大部分:DirectX Software Development Kit DirectX Grap ...
毛毛虫组【Beta】Scrum Meeting 3
第三天日期:2019/6/25 前言第三次会议: 时间:6月25日地点:教10-A511 内容:此次会议主要是对项目验收做准备工作. 1.1 今日完成任务情况以及遇到的问题. 今日完成任务情况: ...
【转载】K-mer算法
k-mer是指将reads分成包含k个碱基的字符串,一般长短为m的reads可以分成m-k+1个k-mers.举个例子吧,为了简化,有这么个reads(当然实际比这个长):AACTGACTGA.如果k ...
ThinkPHP5.0-多语言切换
这两天做得项目中需要多语言切换,于是乎就看了看文档,感觉有些乱,就使用了终极必杀--百度. 借鉴了网上各位大佬所集成.整理出一篇比较适合类似我这种比较菜的随笔吧. 请各位大佬轻虐.感谢. 首先,不说其 ...
shell脚本，通过一个shell程序计算n的阶乘。
[root@localhost ~]# cat jiechen.sh #!/bin/bash #设计一个shell程序计算n的阶乘,要求: #.从命令行接收参数n; #.在程序开始后立即判断n的合法性 ...
Spring框架针对dao层的jdbcTemplate操作crud之query查询数据操作 —— 查询表，返回结果为对象的list集合
用JdbcTemplate的方法完成, 查询数据库表,把用户表sw_user所有数据以List<User>集合返回在JdbcTemplateDemo类中增加查询返回所有对象集合的方法qu ...
ios之自定义导航栏上的返回按钮
导航栏的按钮,右边的按钮是可以自己随意添加的.但左边的返回按钮怎么定制?你会说,添加一个自己的按钮呗!你可以试试看,这样行不行. 正确的答案是重载UINavigationController类的pus ...
SQL 牛刀小试 1 —— 查询操作
#创建数据库create database ST CHARACTER set utf8;#创建用户create user ST identified by '19980510';#授权用户操作该数据库 ...

javascript事件委托和jQuery事件绑定on、off 和one以及on绑定多个事件(重要)

javascript事件委托和jQuery事件绑定on、off 和one以及on绑定多个事件(重要)的更多相关文章

随机推荐

热门专题