元素绑定事件
第一种方式：对象.事件名字(事件处理函数);
$('#band').mouseenter(function(){
$(this).css('backgroundColor','yellow');
});
$('#band').mouseleave(function(){
$(this).css('backgroundColor','');
});
$('#band').click(function(){
alert('我被点击了');
});
第一种写法链式编程
$('#band').mouseenter(function(){
$(this).css('backgroundColor','yellow');
}).mouseleave(function(){
$(this).css('backgroundColor','');
}).click(function(){
alert('我被点击了');
});
第二种方式：对象.bind(‘事件名’,事件处理函数)
为对象绑定事件
$('#band').bind('mouseenter',function(){
$(this).css('backgroundColor','yellow');
});
$('#band').bind('mouseleave',function(){
$(this).css('backgroundColor','');
});
$('#band').bind('click',function(){
alert('我被点击了');
});
同样也可以写成链式编程的方式
$('#band').bind('mouseenter',function(){
$(this).css('backgroundColor','yellow');
}).bind('mouseleave',function(){
$(this).css('backgroundColor','');
}).bind('click',function(){
alert('我被点击了');
});
还有一种方式，就是只调用一次bind方法，在bind方法中传入一个对象
注意：
如果传入的键值对中有相同的事件名称，那么只执行最后一个，用这种方式不能同时绑定多个相同的事件
$('#band').bind({'mouseenter':function(){
$(this).css('backgroundColor','yellow');
},'mouseleave':function(){
$(this).css('backgroundColor','');
},'click':function(){
alert('我被点击了');
}});
第三种方式：父级对象.delegate(‘子级元素’,’事件名字’,事件处理函数);
事件代理
$('#father').delegate('#son','click',function(){
alert('我被点击了');
});
父级元素调用方法，为子级元素绑定事件，事件代理
父级对象.on(’事件名字’, ‘子级元素’,事件处理函数);
on和delegate的作用是一样的，但是参数的顺序不一样
区别：
1． 对象.事件名字(事件处理函数);
2． 对象.bind(事件名字，事件处理函数)
前两种方式只能为存在的元素绑定事件，后添加的元素没有事件
下面两种方式可以为存在的元素绑定事件，后添加的元素也有事件2
3． 对象.delegate(‘选择器’,’事件名字’,事件处理函数)
4． 对象.on(‘事件名字’,’选择器’,事件处理函数)
因为delegate方法中是调用的on方法，所以以后直接用on就可以了
元素解绑事件
用什么方式绑定事件最好就用什么方式解绑事件
第一种方式：
对象.unbind(‘事件名’);
bind括号中写什么事件名字就会把这个事件解绑，并且会把这个元素的所有这个事件都解绑，通过对象.事件名()方式绑定的事件也可以使用unbind解绑；同时解绑多个事件的话可以在括号中写多个事件名，中间用空格隔开；如果bind括号中不写事件名，就会把这个元素的所有事件全部解绑。
第二种方式：
对象.undelegate(‘选择器’,‘事件名’);
如果想要移除多个事件，可以把多个事件名都写上，中间用空格隔开；如果括号中只写选择器不写事件名，不会移除任何事件；如果括号中什么都不写，就会删除子对象的所有事件。
第三种方式：
对象.off(‘事件名’,’选择器’);
<div id="father" style="width:120px;height:100px;border:1px solid red;margin-top:20px">我是父级元素
<p id="son" style="width:100px;height:40px;border:1px solid green;line-height:40px">我是子级元素1</p>
<span id="son2" style="width:100px;height:40px;border:1px solid green;line-height:40px">我是子级元素2</span>
</div>
括号里边什么都不写：解绑父级元素和子级元素的所有事件
$('#father').off();
只写事件名：解绑父级元素和子级元素的某个事件（多个事件中间用空格隔开）
$('#father').off('click mouseenter');
事件名和选择器名都写：解绑子级元素的某个事件（多个事件中间用空格隔开）
$('#father').off('click mouseenter','p');
写选择器名，事件名为””：解绑子级元素的全部事件
$('#father').off('','p');
写事件名，选择器名为”**”：解绑所有子级元素的某个事件
$('#father').off('click','**');
网友评论