1. 事件绑定
jquery事件的简单操作:
$().事件类型(function事件处理);
$().事件类型();
1.1 jquery事件绑定
$().bind(事件类型,function事件处理);
$().bind(类型1 类型2 类型3,事件处理); //给许多不同类型的事件绑定同一个处理
$().bind(json对象); //同时绑定多个不同类型的事件
(事件类型:click mouseover mouseout focus blur 等等)
事件处理:有名函数、匿名函数
1.2 取消事件绑定
① $().unbind(); //取消全部事件
② $().unbind(事件类型); //取消指定类型的事件
③ $().unbind(事件类型,处理); //取消指定类型的指定处理事件
注意:第③种取消事件绑定,事件处理必须是有名函数。
/*****************************************************************************/
//① bind()事件绑定使用
//同一个对象绑定多个click事件 $(function(){ $('div').bind('click',function(){ console.log('谁在碰我?'); }); $('div').bind('click',function(){ console.log('谁又在碰我?'); }); $('div').bind('mouseover',function(){ //给div设置背景色 $(this).css('background-color','lightgreen'); //$('div').css('background-color','lightgreen'); }); $('div').bind('mouseout',function(){ //给div设置背景色 $(this).css('background-color','lightblue'); //$('div').css('background-color','lightgreen'); }); });
//② bind()事件绑定简单使用
//为多个不同类型事件绑定同一个处理
//注意:事件彼此通过“一个”空格分隔 $(function(){ $('div').bind('click mouseover mouseout',function(){ console.log('hello'); }); });
//③ bind()事件绑定简单使用
//通过一个json对象同时绑定多个不同事件 $(function(){ var jn = { click:function(){ console.log('谁敢碰我?') }, mouseover:function(){ console.log('轻轻地小明来了') }, mouseout:function(){ console.log('轻轻地又走了'); } }$('div').bind(jn); //类似attr(json) css(json)
});//unbind()取消事件绑定操作
//以下f1和f2要定义到最外边,使用没有任何影响function cancel(){
//取消事件绑定 //$('div').unbind(); //取消全部事件 //$('div').unbind('click'); //把指定事件类型的全部处理都给取消 $('div').unbind('click',f1); //把指定事件类型的具体处理给取消掉(要求:事件处理是"有名函数") }/*****************************************************************************/
事件绑定是丰富事件操作的形式而已。
从dom2级事件操作开始,同一个对象可以绑定多个同类型的事件,具体如下:
dvnode.addEventListener(‘click’,fn);
dvnode.addEventListener(‘click’,fn);
$(‘div’).click(function);
$(‘div’).click(function);