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

转载于:https://www.cnblogs.com/qlqwjy/p/7767828.html

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

vue学习：事件传递（冒泡和捕获），事件委托，jquery中的事件委托，$event 获取元素，vue事件修饰符
事件传递 ----冒泡和捕获 DOM事件标准定义了两种事件流,这两种事件流分别是捕获和冒泡. 和许多Web技术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们.Netscape选 ...
js事件委托和jQuery事件绑定on , off , one , bind , unbind , die
一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这 100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生. 而在jQuery ...
事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
一.事件冒泡定义事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...
jquery 列表hover效果，css :hover ，jquery 事件委托，jquery hover()方法
jquery 列表hover效果 <ul class="list"><li class="item"><span>1< ...
事件委托技术原理和使用（js，jquery）
事件委托技术原理和使用(js,jquery) 原创 2016年03月10日 11:18:56 标签: 技术 / jquery / javascript 2555 一:事件委托技术原理摘自http:/ ...
JQ 为未来元素添加事件处理器—事件委托
随着DOM结构的复杂化和Ajax等动态脚本技术的运用,有了较多的动态添加进来的元素,直接用JQ添加click事件会发现新添加进来的元素并不能直接选取到,在这里就需要用到事件委托方法,JQ为事件委托提供 ...
js事件冒泡和事件委托
原文:js事件冒泡和事件委托 js事件冒泡 js所谓的事件冒泡就是子级元素的某个事件被触发,它的上级元素的该事件也被递归执行 html: <ul class="clearfix&quo ...
JavaScript之事件委托（附原生js和jQuery代码）
事件委托的原理依赖于事件冒泡,可以通过给父元素的事件委托来确定是哪个子元素触发了事件从而做一系列操作. 使用事件委托的优点 1.操作子元素时不用一一遍历,可以根据事件触发的对象而进行相应操作 dom结 ...
【译】JavaScript面试问题：事件委托和this
JavaScript不仅门槛低,而且是一门有趣.功能强大和非常重要的语言.各行各业的人发现自己最混乱的选择是JavaSscript编程语言.由于有着各种各样的背景,所以不是每个人都对JavaScrip ...
Jquery事件委托之Safari
什么是事件委托事件委托是Jquery中一种事件绑定的方式,不同于常见的事件绑定方式将事件绑定在目标元素上,而是将事件绑定在父级元素上通过事件冒泡来执行绑定函数. //常见的事件绑定(Jquery) ...

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

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

最新文章

热门文章