jQuery学习笔记:事件绑定
2017-02-16 14:40
459 查看
加载DOM
在页面加载完毕后,浏览器会通过js为DOM元素添加事件。通常在js中,使用
window.onload来完成,而在jQuery中,则使用
$(document).ready()方法来代替。
执行时机
$(document).ready()和
window.onload在执行时机上是有区别的:
window.onload是在网页中所有的元素(包括元素所有的关联文件)完全加载到浏览器后才执行,即js此时才可以访问网页中的任何元素。
$(document).ready()则是在DOM完全就绪时就可以被调用,此时jQuery就可以访问网页的所有元素了。但是这并不意味着这些元素关联的文件都已经下载完毕。
但是使用
$(document).ready()也存在一定问题,此函数执行时元素的关联文件可能还并未下载完,如果此时想要更改某元素图片的属性时就不一定能奏效。
要解决这个问题,可以使用jQuery中另一个页面加载的方法:load()。
load()方法会在元素的onload事件中绑定一个处理函数。
如果处理函数绑定给window对象,那么就会在所有内容都加载完毕后才会触发。
如果绑定在元素上,则会在元素的内容加载完毕后触发。
$(window).load(function(){ …… })
等价于js中的如下代码:
window.onload = function(){ …… }
多次使用
由于window.onload是为此属性赋值一个事件处理程序,因此只能绑定一个事件处理程序。
window.onload = one(); window.onload = two();
在上面那段代码中,最终只绑定了two()事件处理函数。
为了达到两个函数顺序触发的效果,只能再创建一个新的方法来实现:
window.onload = function(){ one(); two(); }
而jQuery中的
$(document).ready()则可以绑定多个事件处理程序。每次调用
$(document).ready()方法都会在现有的行为上追加新的行为,这些行为函数会根据注册的顺序依次执行:
$(document).ready(function(){ one(); }); $(document).ready(function(){ two(); });
简写方式
$(document).ready(function(){ …… });
可以被简写为如下形式:
$(function(){ …… });
另外,
$(document)也可以简写为
$()。当
$()不带参数时,默认参数就是document。因此可以简写为:
$().ready(function(){ …… })
三种方式都是一样的功能,可以自行选择。
事件绑定
总结写在前面~目前最推荐使用on()方法代替其他的方法。// 这里的选择器selector用于指定可以触发事件的元素 // 这里的选择器ancestor应是selector的祖辈元素,selector触发的事件可以被其祖辈元素在事件流中捕获,从而以"代理"的形式触发事件。 // jQuery 1.0+ (1.4.3+支持参数data) $("selector").click( [ data ,] handler ); // jQuery 1.0+ (1.4.3+支持参数data) $("selector").bind( "click" [, data ], handler ); // jQuery 1.3+ (1.4+支持参数data) $("selector").live( "click" [, data ], handler ); // jQuery 1.4.2+ $("ancestor").delegate( "selector", "click" [, data ], handler ); // jQuery 1.7+ $("ancestor").on( "click", "selector" [, data ], handler );
click()和bind()方法只将事件处理函数绑定在特定元素上,而后三个则可以通过事件委托来进行绑定,因此在执行后三个函数过后新添加的符合条件的元素,绑定的事件处理函数仍然对其有效。
live()将事件都委托给document来处理
delegate()和bind()则委托给$(“ancestor”)来处理
click()
click()函数用于为每个匹配元素的click事件绑定处理函数。该函数也可用于触发click事件。与click()类似的还有各种事件:keyup()、mouseenter()、blur()……
可以为同一元素多次调用该函数,从而绑定多个事件处理函数。触发click事件时,jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。
要删除通过click()绑定的事件,请使用unbind()函数。
$(":button").click( function(event){ alert( this.value + "-1" ); } );
bind()
用于为每个匹配元素的一个或多个事件绑定事件处理函数。jQuery 3.0中已弃用此方法,请用 on()代替。
执行bind()时,事件处理函数会绑定到每个匹配元素上。因此你使用bind()所有button元素绑定了click事件,是为当时文档中存在的每个button元素绑定click事件。
如果之后你向文档中添加了新的button元素,绑定事件不会对其生效。如果你希望绑定事件对未来新添加的元素也生效,请使用on()、delegate()、live()等事件函数(尽量优先使用靠前的事件函数)。
此外,你可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时,jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。
要删除通过bind()绑定的事件,请使用unbind()函数。
jQueryObject.bind( events [, data ], handler )
$("p").bind("click", function(){ alert( $(this).text() ); });
可以同时绑定多个事件类型:
$('#foo').bind('mouseenter mouseleave', function() { $(this).toggleClass('entered'); });
同时绑定多个事件类型/处理程序:
$("button").bind({ click:function(){ $("p").slideToggle(); }, mouseover:function(){ $("body").css("background-color","red"); }, mouseout:function(){ $("body").css("background-color","#FFFFFF"); } });
你可以在事件处理之前传递一些附加的数据:
function handler(event) { alert(event.data.foo); } $("p").bind("click", {foo: "bar"}, handler)
通过返回false来取消默认的行为并阻止事件冒泡:
$("form").bind("submit", function() { return false; })
unbind()
unbind()函数用于移除匹配元素上绑定的一个或多个事件的事件处理函数。unbind()函数主要用于解除由bind()函数绑定的事件处理函数。
// 为所有button元素的click事件绑定事件处理函数btnClick1 $buttons.bind( "click", btnClick1 ); // 为所有button元素的click事件绑定事件处理函数btnClick2 $buttons.bind( "click", btnClick2 ); // 移除为所有button元素的click事件绑定的事件处理函数btnClick2 // 点击按钮,只执行btnClick1 $buttons.unbind("click", btnClick2); // 移除为所有button元素的click事件绑定的所有事件处理函数(btnClick1和btnClick2) // 点击按钮,不会执行任何事件处理函数 $buttons.unbind("click"); // 移除为所有button元素的任何事件绑定的所有处理函数 // 点击链接,或用鼠标在链接上移入、移出,都不会触发执行任何事件处理函数 $buttons.unbind( );
live()
live()函数用于为指定元素的一个或多个事件绑定事件处理函数。此外,你还可以额外传递给事件处理函数一些所需的数据。
即使是执行live()函数之后新添加的元素,只要它匹配当前jQuery对象的选择器,绑定的事件处理函数仍然对其有效。
此外,可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时,jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。
要删除通过live()绑定的事件,请使用die()函数。
从jQuery 1.7开始,该函数被标记为已过时;从jQuery 1.9开始被移除。请使用on()函数来替代。
jQueryObject.live( events [, data ], handler )
live()函数并不是直接在当前jQuery对象匹配的每个元素上绑定事件处理函数,而是将事件处理函数”委托”给document对象来处理。由于DOM 2级的事件流机制,当事件触发时,该事件会在事件冒泡中传递给其所有的祖辈元素,一直传递到document对象为止。当事件流传递到document时,jQuery会判断当前匹配元素是否符合触发条件,如果该元素符合当前jQuery对象的选择器,jQuery就会捕获该事件,从而执行绑定的事件处理函数。
由于live()的事件处理函数全部附加到document对象上,因此在事件被处理之前,事件可能要经过最长最慢的事件路径。
在由于平台或事件差异,有些事件不支持冒泡,从而无法冒泡传递到document,此时可能无法处理该事件。
由于live()函数的事件处理函数全部附加在document对象上,如果通过某些方式解除了document对象上的事件绑定,可能会波及到使用live()函数委托绑定的其他元素的事件处理函数。例如$(document).off()。
die()
die()函数用于移除匹配元素上绑定的一个或多个事件的事件处理函数。die()函数主要用于解除由live()函数绑定的事件处理函数。
delegate()
delegate()函数用于为指定元素的一个或多个事件绑定事件处理函数。此外,你还可以额外传递给事件处理函数一些所需的数据。
即使是执行delegate()函数之后新添加的元素,只要它符合条件,绑定的事件处理函数仍然对其有效。
此外,该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时,jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。
要删除通过delegate()绑定的事件,请使用undelegate()函数。
从jQuery 1.7开始,请优先使用事件函数on()替代该函数。
jQueryObject.delegate( selector , events [, data ], handler )
delegate()函数并不是为当前jQuery对象匹配的元素绑定事件处理函数,而是为它们的后代元素中符合选择器selector参数的元素绑定事件处理函数。delegate()函数并不是直接为这些后代元素挨个绑定事件,而是”委托”给当前jQuery对象的匹配元素来处理。由于DOM 2级的事件流机制,当后代元素selector触发事件时,该事件会在事件冒泡中传递给其所有的祖辈元素,当事件流传递到当前匹配元素时,jQuery会判断是哪个后代元素触发了事件,如果该元素符合选择器selector,jQuery就会捕获该事件,从而执行绑定的事件处理函数。
on()
此方法是官方推荐的方法,可以替代bind()、delegate()、live()方法。在选择元素上绑定一个或多个事件的事件处理函数。
$(selector).on(event,childSelector,data,function)
event:一个或多个空格分隔的事件类型
childSelector:用于过滤出被选中的元素中能触发事件的后代元素。
如果选择器是null或者忽略了该选择器,那么被选中的元素总是能触发事件。
data:当一个事件被触发时,要传递给事件处理函数的event.data
function:事件被触发时执行的函数。
若该函数只是要执行
return false的话,可以直接在该参数位置写成false。
关于参数childSelector,你可以简单地理解为:
如果该参数等于null或被省略,则为当前匹配元素绑定事件;
否则就是为当前匹配元素的后代元素中符合childSelector选择器的元素绑定事件。
on()函数并不是直接为这些后代元素挨个绑定事件,而是委托给当前jQuery对象的匹配元素来处理。由于DOM 2级的事件流机制,当后代元素childSelector触发事件时,该事件会在事件冒泡中传递给其所有的祖辈元素,当事件流传递到当前匹配元素时,jQuery会判断是哪个后代元素触发了事件,如果该元素符合选择器childSelector,jQuery就会捕获该事件,从而执行绑定的事件处理函数。
举个例子,如果我们希望给页面上所有的
<P>标签绑定click事件处理函数,我们可以在每个P标签上直接分别绑定click事件处理函数。例如:
$("p").on("click",function(){ …… })
我们也可以在这些P标签的任意一个公共祖辈元素上绑定事件委托机制,利用DOM的事件冒泡机制来统一委托处理:
//在body元素上绑定click事件处理函数handler,如果这个click事件是由其后代的P元素触发的,就执行handler $(document.body).on("click", "p", handler);
在这里的示例中,事件委托机制就是,我们不为每个P元素直接绑定click事件处理函数,而是委托给其某个公共的祖辈元素(此处示例中为document.body),”告诉”他:如果接收到了click事件触发通知,并且这个click事件是由我们这些P元素其中之一触发的,就执行祖辈元素上委托绑定的事件处理函数。
注意:”focus”、”blur”等部分事件不支持冒泡,使用事件委托机制将无效。不过,他们一般也有对应的支持冒泡的事件。例如与”focus”对应的”focusin”,与”blur”对应的”focusout”。
此外,我们也可以使用event.stopPropagation()方法,让当前触发的事件停止冒泡。
此外,我们还可以同时绑定多个事件,并为事件处理函数传递一些附加的数据,我们可以通过jQuery为事件处理函数传入的参数event(Event事件对象)来进行处理:
var data = { id: 5, name: "张三" }; // 为n5绑定mouseenter mouseleave两个事件,并为其传入附加数据data // 附加数据可以是任意类型 $("body").on("mouseenter mouseleave", "#n5", data, function(event){ var $me = $(this); var options = event.data; // 这就是传入的附加数据 if( event.type == "mouseenter"){ $me.html( "你好," + options.name + "!"); }else if(event.type == "mouseleave" ){ $me.html( "再见!"); } });
此外,即使符合条件的元素是on()函数执行后新添加,绑定事件对其依然有效。
off()
off()函数用于移除元素上绑定的一个或多个事件的事件处理函数。off()函数主要用于解除由on()函数绑定的事件处理函数。
jQueryObject.off( [ events [, selector ] [, handler ] ] )
// 为所有button元素的click事件绑定事件处理函数btnClick1 $body.on("click", ":button", btnClick1 ); // 为所有button元素的click事件绑定事件处理函数btnClick2 $body.on("click", ":button", btnClick2 );
// 移除body元素为所有button元素的click事件绑定的事件处理函数btnClick2 // 点击按钮,btnClick1照样执行 $body.off("click", ":button", btnClick2); // 移除body元素为所有button元素的click事件绑定的所有事件处理函数(btnClick1和btnClick2) // 点击按钮,不会执行任何事件处理函数 $body.off("click", ":button"); // 移除body元素为所有元素(包括button和<a>元素)的click事件绑定的所有处理函数 $("body").off("click"); // 移除body元素为所有元素的任何事件绑定的所有处理函数 $("body").off( );
相关文章推荐
- jQuery学习笔记之DOM操作、事件绑定(2)
- jquery 深入学习笔记之中的一个 (事件绑定)
- jquery 深入学习笔记之一 (事件绑定)
- js学习笔记(二):JQuery中的On绑定事件的方法
- jQuery 事件绑定(event)学习笔记
- jQuery学习笔记---模态对话框,添加、编辑、删除(注意:click中绑定click,delegate:给后来元素自动添加事件)
- jQuery学习笔记 —— 2. DOM操作和 3. 事件绑定
- jQuery学习笔记之DOM操作、事件绑定(2)
- jQuery 学习笔记 事件基础
- 菜鸟学习笔记4——jquery事件
- jquery学习笔记(三)事件和动画
- 关于jquery input textare 事件绑定及用法学习
- Caliburn.Micro for wp7 学习笔记(4) : 自由添加事件绑定1
- jQuery 学习笔记(二)——jQuery 选择器、jQuery事件
- jQuery学习笔记之jQuery的事件
- [jQuery]学习笔记(二):选择器和事件的处理
- Jquery学习笔记——事件
- jQuery 学习笔记 事件系列
- 关于jquery input textare 事件绑定及用法学习
- learning jQuery 学习笔记四(+jQuery 1.4.1 API)--简单的事件