jquery的bind跟on绑定事件的区别
jquery的bind跟on绑定事件的区别:主要是事件冒泡;
jquery文档中bind和on函数绑定事件的用法:
.bind(events [,eventData], handler)
.on(events [,selector] [,data], handler)
从文档中可以看出,.on方法比.bind方法多一个参数'selector'
.on的selector参数是筛选出调用.on方法的dom元素的指定子元素,如:
$('ul').on('click', 'li', function(){console.log('click');})就是筛选出ul下的li给其绑定click事件;
那么这个selector参数的好处是什么?
好处在于.on方法
原理是事件冒泡,进行事件委托,子元素把事件委托给父元素进行事件处理;
这样的好处
1.万一子元素非常多,给每个子元素都添加一个事件,会影响到性能;
2.为动态添加的元素也能绑上指定事件;
如:
$('ul li').on('click', function(){console.log('click');})的绑定方式和$('ul li').bind('click', function(){console.log('click');})一样;我通过js给ul添加了一个li:$('ul').append('<li>js new li<li>');');这个新加的li是不会被绑上click事件的
但是我用$('ul').on('click', 'li', function(){console.log('click');}方式绑定,然后动态添加li:$('ul').append('<li>js new li<li>');这个新生成的li被绑上了click事件
jquery的bind跟on绑定事件的区别的更多相关文章
- jQuery中bind()与on()绑定事件的区别
.on()方法比.bind()方法多一个参数selector .on()的selector参数是筛选出调用.on()方法的dom元素的指定子元素,如: $("ul").on('cl ...
- JS---DOM---总结绑定事件的区别
总结绑定事件的区别: addEventListener(); attachEvent() 相同点: 都可以为元素绑定事件 不同点: 1.方法名不一样 2.参数个数不一样addEventListen ...
- jQuery中四个绑定事件的区别 on,bind,live,delegate
1.jQ操作DOM元素的绑定事件的四种方式 jQ中提供了四种事件监听方式,bind.live.delegate.on,对应的解除监听的函数分别是unbind,die,undelegate, ...
- jQuery中怎样阻止后绑定事件
你的代码在页面载入过程中已经完成事件绑定了,没有阻止后绑定的事件的办法了,不过可以删除当前指定节点的事件绑定.方法如下:$("#btn").click(function(){if( ...
- jquery动态生成html代码绑定事件
今天工作中需要在页面动态生成html代码,但发现新生成的代码的click事件失效了(非动态生成的代码已经绑定了click事件),于是在网上找了很多解决办法,很多都比较复杂,且使用的jquery都比较老 ...
- jquery绑定事件的区别
query中绑定事件有三种方法:以click事件为例 (1)target.click(function(){}); (2)target.bind("click",function( ...
- jQuery动态移除和绑定事件
function bindEvent() { //移除绑定事件 $('.btnsp').unbind('click'); //绑定事件 $('.btnsp').bind('click', functi ...
- Jquery动态添加的元素绑定事件的3种方法
假设我们点击li标签,弹出他的文本,如果是动态添加的li,点击是没有效果的,压根弹不出来文本. 下面博主分享一下为动态添加的元素绑定事件的三种方法,网上一般都是两种,我在这里多增加了一种. 事件案例: ...
- jquery动态添加元素无法触发绑定事件的解决方案。
jquery动态添加元素无法触发绑定的事件的解决方案. ╭(●`∀´●)╯二狗最近在工作中遇到一个问题,即当用jquery动态添加元素后,发现给动态添加的元素却无法触发事件(╯#-_-)╯╧═╧ ( ...
随机推荐
- Oracle PL/SQL随堂笔记总结
1.pl/sql编程 2.存储过程 3.函数 4.触发器 5.包 6.pl/sql基础 -定义并使用变量 7.pl/sql的进阶 8.oracle的视图 1.pl/sql编程 1.理解oracle的p ...
- (福利)分享一个用android编写的简单的APP——爱吖天气
这是本人随便编写的一个天气的APP,超级简单. 项目已同步至:https://github.com/nanchen2251/AiYaWeatherDemo 基本实现了天气查看,闪屏引导,天气基本信息, ...
- 从零自学Hadoop(20):HBase数据模型相关操作上
阅读目录 序 介绍 命名空间 表 系列索引 本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 文章是哥(mephisto)写的,SourceLink 序 ...
- String类
字符串的功能 A:判断功能 boolean equals(Object obj)//比较对象 boolean eq ...
- Linux应用程序基础
文件位置: 系统命令:/bin和sbin目录,或shell内部指令: 应用程序:/usr/bin和/usr/sbin目录. /usr/bin:普通执行程序文件: ...
- 今天思考一个问题,PHP const和static的区别
static关键字在类中是,描述一个成员是静态的,static能够限制外部的访问,因为static后的成员是属于类的,是不属于任何对象实例,其他类是无法访问的,只对类的实例共享,能一定程序对该成员尽心 ...
- 响应式手机商城页面顶部样式HTML代码
本特效支持PC浏览器和触屏浏览器. 效果展示 http://hovertree.com/texiao/bootstrap/8/ 手机扫描二维码体验效果: HTML代码如下: <!DOCTYPE ...
- 实现一个基于 SharePoint 2013 的 Timecard 应用(中)
门户视图 随着 Timecard 列表的增多,如何查找和管理这许多的 Timecard 也就成了问题.尤其对于团队经理而言,他除了自己填写的 Timecard,还要审核团队成员的 Timecard 任 ...
- DevExpress免费公开课,讲解即将发布的16.2新版功能
先报名后听课,开课时间12月底 报名地址:http://training.evget.com/open/detail/5115[适合人群]覆盖全领域,尤其适合课程适用人群:软件开发人员.企业中的数据分 ...
- OC泛型
OC泛型 泛型是程序设计语言的一种特性,他主要是为了限制类型的,比如OC中的数组,你可以限制他里面装的是NSString类型,泛型的话JAVA和C++都有的,大家要是对泛型不了解的话可以去百度一下. ...