jquery事件绑定函数

1、bind

使用语法:

1  jQueryObject.bind( events [, data ], handler )
2  jQueryObject.bind( events [, data ] [, isDefaultBubble ] )
3  jQueryObject.bind( eventsMap )

ps:执行bind()时,会为当时文档中存在的每个匹配的元素绑定事件,如果之后你向文档中添加了新的与bind()绑定的元素相同的元素,绑定事件不会对其生效。如果你希望绑定事件对未来新添加的元素也生效,请使用on()delegate()live()等事件函数(尽量优先使用靠前的事件函数)。

2、on

使用语法:

1 jQueryObject.on( events [, selector ] [, data ], handler )
2 jQueryObject.on( eventsMap [, selector ] [, data ] )

  从jQuery 1.7开始,on()函数提供了绑定事件处理程序所需的所有功能,用于统一取代以前的bind()、 delegate()、 live()等事件函数。

  关于参数selector,你可以简单地理解为:如果该参数等于null或被省略,则为当前匹配元素绑定事件;否则就是为当前匹配元素的后代元素中符合selector选择器的元素绑定事件。参数handler中的this指向当前匹配元素的后代元素中触发该事件的DOM元素。如果参数selector等于null或被省略,则this指向当前匹配元素(也就是该元素)。

ps:如果传递了selector参数,那么on()函数并不是为当前jQuery对象匹配的元素绑定事件处理函数,而是为它们的后代元素中符合选择器selector参数的元素绑定事件处理函数。on()函数并不是直接为这些后代元素挨个绑定事件,而是委托给当前jQuery对象的匹配元素来处理。由于DOM 2级的事件流机制,当后代元素selector触发事件时,该事件会在事件冒泡中传递给其所有的祖辈元素,当事件流传递到当前匹配元素时,jQuery会判断是哪个后代元素触发了事件,如果该元素符合选择器selector,jQuery就会捕获该事件,从而执行绑定的事件处理函数。

3、delegate

使用语法:

jQueryObject.delegate( selector , events [, data ], handler )
jQueryObject.delegate( selector, eventsMap )

ps:参数的意义和on方式一样,两者区别是seleter和events顺序不同,delegate的selector是必需的,on的selector是可选的。

时间: 2024-10-01 09:18:57

jquery事件绑定函数的相关文章

JQuery事件绑定函数one:绑定的事件处理函数只会被执行一次

JQuery绑定事件处理函数,有两种方式(方式1和方式2)是最常用的,方式3使用的较少. 方式1: $("#button").click(function(){ }); 这种方式很简单,也是平时编码最常用的做法.HTML中原始的事件,如onclick.onmouseover.onkeypress等,JQuery对名称进行了简单的封装,如onclick与JQuery的click对应,onmouseover与JQuery的mouseover对应.查看JQuery的API可以发现:JQuer

JQuery事件绑定函数:on()与bind()的差别

JQuery从1.7+版本开始,提供了on()和off(),进行事件处理函数的绑定和取消.这2个API与JQuery最初提供的bind()和unbind()有很多相似的地方,也有一些不同之处.bind和unbind的详细介绍,可以参考这篇文章. on()和bind()的函数签名如下: bind(type, [data], fn) on(type,[selector],[data],fn) 可以看到2个函数的区别在于:是否支持selector这个参数值.由于javascript的事件冒泡特性,如果

jQuery事件绑定on()、bind()、live()与delegate() 方法详解

jQuery事件绑定有四个方法,对应为on,off,bind,unbind,delegate,undelegate,live,die 比较和联系: 1.bind()函数只能针对已经存在的元素进行事件的设置:但是live(),on(),delegate()均支持未来新添加元素的事件设置: 2.bind()函数在jquery1.7版本以前比较受推崇,1.7版本出来之后,官方已经不推荐用bind(),替代函数为on(),这也是1.7版本新添加的函数,同样,可以 用来代替live()函数,live()函

jQuery事件绑定和委托实例

本文实例讲述了jQuery事件绑定和委托.分享给大家供大家参考.具体方法如下: jQuery事件的绑定和委托可以用多种方法实现,on()  . bind()  . live()  . delegate() ,还有one(). 有时我们可能会像下面这样绑定一个事件: 复制代码代码如下: $("#div1").click(function() {      alert("点击后触发");  }); 上面的事件绑定,我们可以通过多种方式去实现: 1. on() 复制代码代

深入学习jQuery事件绑定

× 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对这四种事件处理程序进行了兼容处理,以更简单的方式就可以实现事件绑定.本文将详细介绍jQuery事件绑定 bind() bind()方法为一个元素绑定事件处理程序,有以下3种使用方法 bind(eventType[,eventData],handler(eventObject)) bind()方法可以

javascript事件委托和jQuery事件绑定on、off 和one

一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生.而在jQuery 中,我们通过事件冒泡的特性,让子元素绑定的事件冒泡到父元素(或祖先元素)上,然后再进行相关处理即可.如果一个企业级应用做报表处理,表格有2000 行,每一行都有一个按钮处理.如果用之前的.bind()处理,那么就需要绑定2000 个事件,就好比2000 个学生同时站在学校门口等快递,不断会堵塞路口,还会

jQuery事件绑定方法bind、 live、delegate和on的区别

我们试图绑定一些事件到DOM元素上的时候,我相信上面这4个方法是最常用的.而它们之间到底有什么不同呢?在什么场合下用什么方法是最有效的呢? 1.准备知识 当我们在开始的时候,有些知识是必须具备的: 1).DOM树 下图仅仅是一个示例,这是一个在browser环境下的一棵模拟DOM树,在下面的代码中仅起到演示的作用: 2).Event bubbling (aka event propagation)冒泡 我们的页面可以理解为一棵DOM树,当我们在叶子结点上做什么事情的时候(如click一个a元素)

jquery 事件绑定案例

效果图公如下 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head>  <meta http-equiv

兼容IE9以下和非IE浏览器的原生js事件绑定函数

事件绑定函数的demo如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="UTF-8"/> <title>测试事件绑定函数</title> <scrip