jquery事件代理
在jQuery中,事件代理是指:把事件绑定到父级元素,然后等待事件通过DOM冒泡到该元素时再执行。
在事件侦听过程中有两种触发事件的方式:事件捕获和事件冒泡。事件冒泡更快,效率更高。
事件捕获:事件在DOM中向后代元素下沉。
事件冒泡:事件从发生事件的源元素通过DOM向上冒泡。
jQuery使用事件冒泡的方式处理所有的事件。jQuery库提供了3个方法来绑定元素的事件处理函数,分别是bind()、live()、delegate()。
1、使用.bind()绑定事件处理函数:必须提供两个参数,第一个是事件类型,第二个是事件处理函数。
.bind(event type,event handle)
如:
$(document).ready(function(){$(".selector").bind("click",alertMe); function alertMe(){alert("Hello world!"); } });
.bind()方法仅适用于为DOM中已经存在的元素绑定事件处理函数。对于后来通过操作脚本时添加的DOM元素,则不起作用。
设想:在DOM中有一个.box元素,你希望某个链接在每次被单机时复制这个元素,并把它添加到DOM中。首先,我们可以为这个链接绑定一个适当的click事件处理函数。每单击这个链接一次,.clone()方法就会调用一次,复制box元素并把它追加到相应的容器中:
$(document).ready(function(){$('.box').bind('click',function(){$(this).clone().appendTo('.container'); }); });<div class="container"><div class="box">click me</div> </div>
在浏览器运行,结果是单击这个链接,会追加元素。但是单击除了第一个链接的元素时,并不会执行click事件。
因此:绑定的click事件不能作用于这些刚刚被添加到DOM中的新元素。只有绑定事件那一刻DOM中存在的元素才会成功绑定click事件。click事件仅仅被绑定到第一个元素上,因此虽然能不断克隆第一个元素,而被克隆出来的这些元素却没有一个能够受click事件影响。如果想这个克隆出来的元素能够受click事件影响,可以使用.live()绑定。
2、使用.live()绑定事件处理函数
.live()方法提供了一种相当灵活地捕获事件的方式。它的用法与.bind()极为相似。唯一不同点是.live()方法不仅作用于DOM中当前存在的元素,还作用于将来可能存在(动态生成)的元素。
.live(event type,event handle)
修改上面的例子:
$(document).ready(function(){$('.box').live('click',function(){$(this).clone().appendTo('.container'); }); });<div class="container"><div class="box">click me</div> </div>
3、使用.delegate()绑定事件处理函数
.delegate(selector,event type,event handler)
修改以上例子:
<script type="text/javascript">$(document).ready(function(){$('.container').delegate('.box','click',function(){$(this).clone().appendTo('.container:first'); });}); </script><body><div class="container"><div class="box">click me</div></div><div class="container"><div class="box">click me</div></div><div class="container"><div class="box">click me</div></div></body>
于用.live()绑定事件处理函数执行效果一样。但是用.delegate()绑定事件处理函数要比用.live()效率更高。jQuery库有关绑定的部分源码:
bind: function( types, data, fn ) {return this.on( types, null, data, fn );},unbind: function( types, fn ) {return this.off( types, null, fn );},live: function( types, data, fn ) {alert(this.context); //添加一行jQuery( this.context ).on( types, this.selector, data, fn );return this;},die: function( types, fn ) {jQuery( this.context ).off( types, this.selector || "**", fn );return this;},delegate: function( selector, types, data, fn ) {alert(this); //添加一行return this.on( types, selector, data, fn );},undelegate: function( selector, types, fn ) {// ( namespace ) or ( selector, types [, fn] )return arguments.length == 1? this.off( selector, "**" ) : this.off( types, selector, fn );},
分别在live和delegate方法内增加了一行,浏览器运行后,使用.live(),弹出是document,也就是说用.live()绑定事件,它的源头是document。使用.delegate(),弹出的是object,也就是说用.delegate()绑定事件,它的源头是具体绑定的元素。因此,使用.delegate()要比使用.live()效率更高。
从源码可以看出,用.bind()绑定事件处理函数,可以使用unbind()取消事件绑定。
用.live()绑定事件处理函数,可以使用die()取消事件绑定。
用.delegate()绑定事件处理函数,可以使用undelegate()取消事件绑定。
转载于:https://www.cnblogs.com/zhangrenjie/p/5006433.html
jquery事件代理相关推荐
- jquery事件代理方法
之前写过原生js的事件代理,最近在用jquery写项目,自然少不了事件代理,所以今天就来写下jquery的事件代理: 例如下面的例子:用事件代理的方法给每个li都添加一个点击事件, HTML代码: & ...
- 9 jQuery事件代理
1. 事件代理介绍 事件代理就是利用事件冒泡的原理(事件冒泡就是事件会向它的父级一级一级传递),把事件加到父级上,通过判断事件来源,执行相应的子元素的操作,事件代理首先可以极大减少事件绑定次数,提高性 ...
- JavaScript基础学习--事件代理
一.JavaScript原生事件代理 var item = document.getElementById('item'); item.onclick(function(ev) {var ev = e ...
- JQuery 之 事件委托(事件代理)
事件委托/事件代理: 事件委托就是利用冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操 事件委托的写法: $(选择器).delegate( 事件真实发生在谁身上, 事件属性,匿名函 ...
- jQuery - 理解事件代理
事件代理允许将单个的时间监听器,附加到父元素上,该事件会被所有该父元素的匹配的后代元素触发,无论该后代元素是当前存在的,或者是后续添加的. 示例: <html> <body> ...
- jquery实现事件代理
$('.parent').on('click','.child',function () {$(".parent").hide();}) 事件代理利用了事件冒泡的原理,通过在父级元 ...
- 什么是 jQuery 事件
jQuery事件是DOM事件的封装,同时支持自定义的扩展.在程序设计中,事件和代理有着相似的作用: 它们提供了一种机制,使得行为的实现方式和调用时机可以分离. 不谈jQuery,DOM本身就提供了一系 ...
- DOM事件与jQuery事件的是非纠葛
在javascript和JQuery之中,都有事件的处理方式,在我们编写程序实现某些功能的时候,我们会发现使用原生的DOM事件与JQuery中封装的事件都能实现同样的效果,那么也许我们会认为他们之间的 ...
- JavaScript事件代理和委托
2019独角兽企业重金招聘Python工程师标准>>> 浏览器的事件冒泡 当事件发生后,这个事件就要开始传播.例如我们点击一个按钮时,就会产生一个click事件,但这个按钮本身不能处 ...
最新文章
- “神经+符号”:从知识图谱角度看认知推理的发展
- Aix6.1安装openssh
- wndows系统命令总结
- [算法]不使用*、/、+、-、%操作符求一个数的1/3
- Prototype1.5.1源代码解读分析-3
- Qt3D文档阅读笔记-Qt3D老版本知识点及使用新版本的运行
- c++使用单向链表存储一组有序数据_《一起学习java和数据结构》系列-数组和链表...
- java的OutOfMemoryError: PermGen space实战剖析
- 算法面试:精选微软经典的算法面试100题(第21-25题)
- 微机计算机原理及应用ppt,微型计算机原理及应用PPT课件
- 代数拓扑----视频推荐b站地址2022,可能会发布一些相关文章【重要】
- 如何设置电脑桌面动态壁纸
- Win11找不到xinput1_3.dll怎么办?
- JavaScript中类似java常量constants使用方法
- js中利用prompt和parseFloat来实现用户体温华氏和摄氏的提取(18)
- python如何变换环境
- dede服务器建站_织梦教程,网站搭建,网站成功部署教程
- 未来宝宝照片合成,怎么做到的呢?
- python爬取股票图_python 股票数据爬取(两种方法)
- 022 Rust死灵书之污染
热门文章
- 基于微信小程序二手跳蚤市场系统设计与实现毕业设计论文
- 嵌入式LINUX系统程序开发
- html 输入框变红色,为什么CAD的动态输入框变成红色?
- cocos植物大战僵尸(三)游戏场景:地图滚动
- 阿里云服务器企业用户最新配置表!
- VS2019 配色_NBA球员上脚:基德穿AJ13湖人配色,莫兰特的保罗乔治4代
- zk4元年拆解_莆田纯原版本科比四代ZK4细节、拆解展示
- .NET Core Onvif协议C#教程系列之XiaoFeng.Onvif组件库
- CSS top、margin-top和padding-top的区别
- [08.30][美国][喜剧][怪物史莱克3][DVD-R/365M][中字][07最新票房大片DVD版]