jquerybind jQuery中bind函数用法
这篇文章给大家聊聊关于jquerybind，以及jQuery中bind函数用法对应的知识点，希望对各位有所帮助，不要忘了收藏本站哦。
请问为什么Jquery 的unbind方法和bind方法要结合使用
bind()方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数
unbind()方法移除被选元素的事件处理程序。能够移除所有的或被选的事件处理程序，或者当事件发生时终止指定函数的运行。
event是事件类型，类型包括：blur、flcus、load、resize、scroll、unload、click、dblclikc、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等，当然也可以是自定义名称。
data为可选参数，作文event.data属性值传递给事件对象的额外数据对象。
function是用来绑定的处理函数。
简单来讲就是当你打开一程序，电脑cpu就会损耗。而你打开这个程序通常不需要一直开着，肯定是当你用这个程序做完你的事情后就关了。这时unbind就可以将这程序完全退出释放cpu你的损耗。
jQuery中bind函数用法
问题1：
<!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="Content-Type" content="text/html; charset=utf-8"/>
<title>Simple JQuery</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$('#mybtn').bind('click',{a:'hello', b:'world'}, myFun);
});
function myFun(e){
alert(e.data.a);
alert(e.data.b)
}
</script>
</head>
<body>
<input type="button" id="mybtn" value="Click me."/>
</body>
</html>
如上面例子，可以传递多个参数。
-------------------------------------------------------
问题2：
$('<p>Test</p>').appendTo('.inner');
$('.inner').append('<p>Test</p>');
上面这个是append()和appendTo()区别，应该一目了然了吧？
而appendChild()不是jquery的方法，而是javascript原生的方法。
append和appendChild的关系是：
其实几乎一样，append就是调用appendChild实现的，只是在append前，做一个简单判断。下面贴下jquery的源代码：
append: function(){
return this.domManip(arguments, true, function( elem){
if( this.nodeType=== 1){
this.appendChild( elem);
}
});
}
--------------------------------------------------
问题3：
<!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="Content-Type" content="text/html; charset=utf-8"/>
<title>Simple JQuery</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$('#mybtn').bind('click', myFun);
});
function myFun(){
alert($(this).attr('value'));
}
</script>
</head>
<body>
<input type="button" id="mybtn" value="Click me."/>
</body>
</html>
第3个问题不是看的很明白？直接调用应该可以呀，看看这个例子是不是你想要的？
---------------------------------------------------
问题4：网上有很多，查看参考链接这个吧。
JQuery入门——用bind方法绑定事件处理函数应用介绍
1、bind()功能是为每个选择元素的事件绑定处理函数，其语法如下：bind(type,
[data],
fn)
其中type为一个或多个类型的字符串，如click或change，也可以自定义；可以被type调用的类型包括blur、focus、load、resize、scroll、unload、click、dbclick、mousedown等事件。参数data是作为event.data属性值传递对象的额外数据对象。参数fn是绑定到每个选择元素的事件中的处理函数。
2、示例代码：
复制代码
代码如下:
<!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="Content-Type"
content="text/html;
charset=utf-8"
/>
<title>bind方法绑定事件</title>
<script
type="text/javascript"
src="jquery-1.8.3.min.js"></script>
<script
type="text/javascript">
$(function(){
var
intI=0;
$("#btnBind").bind("click
",function(){
intI++;
$(".clsShow").show().html("您好，欢迎来到JQuery世界！").append("<div>执行次数"+intI+"</div>");
$(this).attr("disabled","disabled");//按钮不可用
})
})
</script>
</head>
<body>
<input
id="btnBind"
type="button"
value="Button"
class="btn"/>
<div
class="clsShow"></div>
</body>
</html>
3、效果图预览：
再点击则无反应
jQuery中的bind()函数跟on()函数有什么区别呢
.bind()与.on()的区别：
（1）是否支持selector这个参数值。由于javascript的事件冒泡特性，如果在父元素上注册了一个事件处理函数，当子元素上发生这个事件的时候，父元素上的事件处理函数也会被触发。
如果使用on的时候，不设置selector，那么on与bind就没有区别了。
（2）on绑定的事件处理函数，对于未来新增的元素一样可以的，和delegate效果相同，而bind则不行。
（3） delegate用法与on()相同，只是参数的顺序不同：
扩展资料：
.bind()与.on()的实际应用：
1.bind()是直接绑定在元素上，将一本地地址与一套接口捆绑。如无错误发生，则bind()返回0。否则的话，将返回-1，应用程序可通过WSAGetLastError()获取相应错误代码。
用于事件处理程序
function ClassName(){
this.eventHandler=(function(){
}).bind(this);
}
2.on()则实现事件代理,可以在匹配元素上绑定一个或者多个事件处理函数。
（1）用来绑定多事件,并且为同一函数，如：
$('div').on('click mouseover',function(){
//do sth
});
（2）多个事件绑定不同函数，如：
$('div').on({
'click':function(){
//do sth
},
'mouseover':function(){
//do sth
}
});
（3）事件代理，如：
html:
<button id="bt1">按钮1</button>
jq:
$('#bt1').on('click',function(){
$('body').append('<button>按钮2</button>');
});
$('body').on('click','.bt2',function(){
console.log('这是bt2');
}
参考资料：百度百科-bind()
关于本次jquerybind和jQuery中bind函数用法的问题分享到这里就结束了，如果解决了您的问题，我们非常高兴。