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事件

原文地址:https://www.cnblogs.com/binghuaZhang/p/10950816.html

时间: 2024-11-09 03:02:19

jquery的bind跟on绑定事件的区别的相关文章

jQuery中四个绑定事件的区别 on,bind,live,delegate

1.jQ操作DOM元素的绑定事件的四种方式       jQ中提供了四种事件监听方式,bind.live.delegate.on,对应的解除监听的函数分别是unbind,die,undelegate,off 2.bind      $(selector).bind(event,data,function)      event:事件,必选,一个或多个事件:data:参数,可选: fn:绑定事件发生时执行的函数,必选 bind()是最直接的,存在最久的绑定方法      优点:兼容性好,任何浏览器

jQuery中怎样阻止后绑定事件

你的代码在页面载入过程中已经完成事件绑定了,没有阻止后绑定的事件的办法了,不过可以删除当前指定节点的事件绑定.方法如下:$("#btn").click(function(){if($("#tx").val()==""){alert("e1");}else{//删除后绑定的事件...$("#btn").unbind('click');}}); 说明:unbind([type],[data])bind()的反向

jquery绑定事件的区别

query中绑定事件有三种方法:以click事件为例 (1)target.click(function(){}); (2)target.bind("click",function(){}); (3)target.live("click",function(){}); 第一种方法很好理解,其实就和普通JS的用法差不多,只是少了一个on而已 第二.三种方法都是绑定事件,但是二者又有很大的不同,下面着重讲解一下,因为这个如果用到Jquery的框架的话是用的挺多的,尤其要注

jquery appaend元素中id绑定事件失效问题

1. 在jquery中append元素,如果该元素中有id值并且绑定事件,那么该id事件会失效,必须刷新一下才能使用. 2.解决办法: 举例:如果在一个<div class="title"></div>中,通过append添加一个id="demo"的按钮,常用的直接$("Selector").on("eventType",function(){})监听事件函数不起作用,例如该按钮的点击监听事件应该这样写

不使用jquery情况下循环添加绑定事件方法

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 .page{border: 1px red solid;} 8 .up{width:300px;height:50px;} 9 .a{width:90px;height:5

jQuery的.bind()、.live()和.delegate()之间区别[转]

摘要:jQuery的.bind()..live()和.delegate()之间的区别并非总是那么明显的,然而,如果我们对所有的不同之处都有清晰的理解的话,那么这将会有助于我们编写出更加简洁的代码,以及防止在交互应用中弹出错误. 基本要素 DOM树 首先,可视化一个HMTL文档的DOM树是很有帮助的.一个简单的HTML页面看起来就像是这个样子: 事件冒泡(又称事件传播) 当我们点击一个链接时,其触发了链接元素的单击事件,该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行. $('a').b

dom addeventlistener与id 绑定事件的区别

文档中有写. //addEventListener() 方法用于向指定元素添加事件句柄. //提示: 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄. //Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法,,Opera 7.0 及 Opera 更早版本也不支持. 但是,对于这些不支持该函数的浏览器,你可以使用 attachEvent() 方法来添加事件句柄 (查看 "更

jquery动态生成html代码绑定事件

今天工作中需要在页面动态生成html代码,但发现新生成的代码的click事件失效了(非动态生成的代码已经绑定了click事件),于是在网上找了很多解决办法,很多都比较复杂,且使用的jquery都比较老,于是结合网上加上自己的测试,找到了一种解决方法. 我使用的jquery是1.9.11,jquery1.7之后就将live方法废弃了,新增了on和off方法,我的解决办法就是使用on方法,首先看代码: <div class="h3"> <h3>李健1</h3&

jQuery动态添加元素无法触发绑定事件

用jquery动态添加元素后,发现给动态添加的元素无法触发事件.解决方案如下: 方法一:绑定live事件(live事件只在jquery1.9以下才支持,高版本不支持). 1 2 3 $(".newBtn").live("click",function(){ ///jquery 1.9(不包括1.9)以下可以                alert('这里是动态元素添加的事件');            }) 方法二:利用on()事件绑定 ($(ParentEle)