在js中为某个元素绑定事件时,我们常用到on函数和bind函数,两个函数有什么区别,什么时候用哪个函数,今天脑残小编简单介绍一下,不喜勿喷;
长话短说进入正题.
先看两个方法的写法
$("body").on("click", ".button", function(){
//do something
})
$("body .button").bind("click", function(){
//do something
})
相同点:意思都是每当点击body中样式为button的元素,就会执行function中的代码;
不同点:
on方法主要强调点击body,并且所点击的元素包含button样式时,执行函数方法;
bind强调点击样式为button的元素时,执行函数代码;假如页面中暂时还没有这个元素,那么这个事件就会无效;
所以如果你要添加事件的元素是后面动态加载进来的,建议直接用on方法绑定事件,或者待元素加载进来后再次调用一下bind函数绑定事件;
如果你能确保js执行之前你要绑定事件的元素已经加载了,建议用bind方法,个人认为bind方法效率应该比on方法效率高(没亲测过);
往下看往下看------》
此外,下面做一个实验,写一个简单的html如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<style>.blue{color:blue;}</style>
<script src="js/jquery-1.11.1.min.js"></script>
</head>
<body>
<div class="blue">点击这里改变颜色</div>
</body>
<script>
//1、用这种bind方式,当元素样式发生改变,不再满足前面的选择器时,这个事件依旧有效//
$("div.blue").bind("click", function(){
if($(this).hasClass("blue")){
$(this).removeClass("blue");
}else{
$(this).addClass("blue");
}
});
//2、用这种on方式,当on方法里面的选择器样式发生改变时,这个事件会失效//
/* $("body").on("click", "div.blue", function(){
if($(this).hasClass("blue")){
$(this).removeClass("blue");
}else{
$(this).addClass("blue");
}
}); */
</script>
</html>
打开上面编写的html页面,如果用script中的第一种方法,即:
$("div.blue").bind("click", function(){
if($(this).hasClass("blue")){
$(this).removeClass("blue");
}else{
$(this).addClass("blue");
}
});
发现点击文字时,文字颜色会一直可以在蓝和黑之间切换。
若把第一种方式注释掉,改用第二种方式:
$("body").on("click", "div.blue", function(){
if($(this).hasClass("blue")){
$(this).removeClass("blue");
}else{
$(this).addClass("blue");
}
});
发现第一次点击文字时,文字颜色由蓝变黑,接着再点击就不会变化了。
为何呢?下面来说明原因
第一种bind的主体是$("div.blue"),这个元素找出来后给它绑定点击事件,然后这个元素无论怎么改变,只要它还存在,那这个绑定的事件会一直有效。
第二种on的主体是$("body"),当你每一次点击body元素时都会进行检查,从你点击的最小元素往上一直检查是否有满足div.blue选择条件的元素,如果有就会运行事件里的方法代码。因此上面点击一次之后,blue样式被移除了,再点击第二次时检查条件不再满足,也就不会再能改变文字颜色。 也就是说,这个点击事件还是存在的,存在于body上,每次点击body的时候也都还是会进行检查,只是找不到指定选择条件的元素了,因此没有执行绑定的方法。
author:蓝何忠
email:lanhezhong@163.com