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);